Page MenuHomePhabricator

ChipContainer: The component is in a confusing state when writing a string but not submitting it
Open, Needs TriagePublicBUG REPORT



When using the ChipContainer component for example to add aliases to a function definition, the component initially looks like an input.
If the user writes a string and steps to the next field, the input looks like "filled"

Screenshot from 2023-01-05 13-14-11.png (349×620 px, 43 KB)

But because the user hasn't pressed enter, the text hasn't been "submitted" and transformed into a chip. This means that the user might believe that they have entered a string as alias, but when saving, this value will not be saved.

We should probably avoid a state in which this input looks "filled" but it's really not by either:

  • clearing it when a user focuses out without actually having submitted the text and converted it into a chip, or
  • automatically submitting and converting whatever existing text is there in the input field when focusing out the field

Steps to reproduce:

  1. Go to
  2. Write a text in the Alias field and, without pressing enter, press "tab" or focus on another field

Observed behavior:

  • The field looks "filled", which is misleading to the user, who might thing that their value will be saved while it won't

Expected behavior (Acceptance criteria):

  • Clear the field or submit the text, but don't leave it in a "middle" state that looks like it's filled

Devices and Design (URLs or screenshots, if applicable):

  • Desktop: ...
  • Small screens/mobile: ...

Completion checklist

Event Timeline

I see two simple solutions:

  1. either disallow saving when there is non-chipped text and display a clear and actionable error message
  2. turn any unchipped text into a chip the moment the user clicks on publish

I prefer the second.