NEW SearchableDropdownField

[emteknetnz]

Issue #1618

This code is adapted from silverstripe/tagfield

Framework PR

• NEW SearchableDropdownField silverstripe-framework#11057

[emteknetnz]

Design feedback:

• try and remove arrow for lazy load

• get rid of mid-grey hover state

• get rid of 'active hover' state blue, make it mid-blue 'active non-hover state'

• change padding on multi-selected options - react-select-9jq23d
  padding: 3px 10px 3px 10px;

.ss-searchable-dropdown-field__multi-value__remove
padding: 2px 5px 2px 5px;

.ss-searchable-dropdown-field__multi-value
change border color from #66afe9 (light blue) to grey #c1cad9

.ss-searchable-dropdown-field__multi-value
border-left: #c1cad9

.ss-searchable-dropdown-field__multi-value__remove:focus, .ss-searchable-dropdown-field__multi-value__remove:hover
background-color: #ffe0e0 (randomly grabbed, ideally would have an existing variable, or use calc() on $branch-danger)
color: #d40404 ($brand-danger)

[emteknetnz]

Design review implementation has been approved by internal design team

[GuySartorelli]

Code looks broadly good.
Haven't fully tested it locally yet - will wait for the framework changes.

One thing I did notice: when I type to search, it swaps the dirty state of the form, making it look like there are unsaved changes.

IIRC we had that problem with tagfield somewhat recently as well.

[emteknetnz]

I think I've fixed the issue with the fix the dirty state on search

[GuySartorelli]

If I select an option and then clear that option (without saving inbetween), the page still thinks I have unsaved changes.

1. Page loads. No unsaved changes.
2. I type a search term. No unsaved changes.
3. I select an option. Page correctly identifies changes.
4. I clear the selection. Page incorrectly thinks there are still unsaved changes.

[emteknetnz]

I've tried really hard to fix this though I just cannot. There's a 'changed' class that gets added by jquery.changetracker to an <input> that react-select added. jquery.changetracker just blindly tracks virtually all inputs, which is great until you get situations like this.

The issue seems be that jquery.changetracker has full control over the 'changed' class being added and there's nothing you can do about it.

Setting a no-change-track className on the <DynamicComponent> will block all change tracking. I've tried that along with also adding in a new <input> property as a sibling to <DynamicComponent>, manually setting the className on the input to 'changed' based on whether there are changes and dispatching the change event from that element. But that doesn't work, I still don't get to control whether or not the 'changed' class appears on the input

[GuySartorelli]

Please add behat tests - especially for silverstripe/silverstripe-framework#11057 (comment)

[emteknetnz]

We don't have behat tests for FormFields in admin, instead we use jest tests. This PR has jest tests. For the 'clearable' functionality called out in silverstripe/silverstripe-framework#11057 (comment) - that's functionality on react-select so all the PHP code is doing is passing a prop to it

[GuySartorelli]

Looks good, works great locally.