Redesign and/or replace GridFieldAddExistingAutocompleter with a new version

[robbieaverill]

The GridFieldAddExistingAutocompleter looks like this as at 4.3.0:

This design is jQuery UI powered, doesn't conform to more modern SilverStripe design patterns as well as having some minor UX issues such as cutting off the placeholder text in this example (Group > Members GridField out of the box).

We could spruce the design of this up a little bit, and/or convert it to a React component. If it becomes a React component it would be important to ensure that it considers the future state of React GridField (#556 #537 #463) in whatever way it can so it can still be useful in the next generation GridField.

We'd need some designs for this first though.

Related issues:

• Use react-select for react-based dropdowns (SingleSelectField and MultiSelectField)
• gridfield urgently needs UX attention
• Remove jquery-ui

[chillu]

@clarkepaul

[clarkepaul]

Just so happens I was discussing this an hour ago, we are lumping this together with some proposed design tidy-ups to the GridField header. When the designs are complete we can likely combine the effort to resolve all three issue under the same set of work. The design output will be here https://invis.io/YGGYS6HDMRK#/291645813_Gridfield , and we are still working on the "Link existing" UI.
Related silverstripe/silverstripe-framework#8498
Related silverstripe/silverstripe-framework#8254

[mlewis-everley]

Not sure if this is strictly related to this issue, but we have just noticed a bug with GridFieldAddExistingAutocompleter that is at least related to this issue.

When you have selected an object from the search field, the Add Button retains it's readonly state (cursor: not-allowed style is still applied), so the action looks like you cannot click it (even though you can).

Looks like to fix the following line needs to be changed to $addAction->setDisabled(true);

https://github.com/silverstripe/silverstripe-framework/blob/4.3.4/src/Forms/GridField/GridFieldAddExistingAutocompleter.php#L139

[michalkleiner]

Our biggest problem with this component is that the user doesn't know what are the existing items, until trying a letter to get a list. If it was being reworked, it'd be nice if that could be considered as well.

[mlewis-everley]

@michalkleiner I would agree to this, maybe the autocomplete should display a list of possible results on focus?