Change DropList combobox filter comparison to allow for matches with same starting characters

[justinwolfe]

Problem/Feature

We're going through UI/A11y fixes for work that shipped without QA 😬 and one of the items from this card is:

Cannot create a tag if it contains characters from a current tag.

In other words, if I have the tag "sample" and I enter a search for "sam" into the combobox, I don't get the option to create a new tag "sam", but I should.

I believe it's down to the line that I've changed in this PR, which is that the combobox filter is comparing what the string starts with rather than comparing the entire string and since we already have a tag that starts with "sam" it doesn't give me the option to create another.

Guidelines

Make sure the pull request:

• [x] Follows the established folder/file structure
• [ ] Adds unit tests
• [ ] If it is a refactor or change to an existing component, have you verified it won't break existing Cypress tests or have you updated them?
• [ ] Did you verify some accessibility (a11y) basics?
• [ ] Adds/updates stories. Guidelines
• [ ] Adds/updates documentation (ie proptypes) Guidelines
• [ ] Has it been tested in Help Scout's supported browsers?
• [x] Requests review from designer of the feature
• [x] Add label (bug? feature?)

[tinkertrain]

Hi @justinwolfe , this change breaks the comboboxes: https://i.hlp.sc/FfY92h

That method you modified here filters the existing items with the value of the input, we have a very simple filtering implementation: if it starts with whatever you write, we filter out the rest, so in a list of:

• Arnold
• Amalia
• Bernard
• Archie

Typing "a", returns:

• Arnold
• Amalia
• Archie

Typing "ar", returns:

• Arnold
• Archie

If we change to strict equality, it will match none, as we don't have items "a" or "ar".

I'm not sure what the implementation on your side for the tags feature is like, I'm assuming it's using an action item. Depending on that, we can adjust/add/fix something here in HSDS or there.

[justinwolfe]

@tinkertrain Ah, that totally makes sense, thank you! I had figured there was some reason that was the way it was but I wasn't sure.

Yes, it's an action item in our implementation that we insert in the customEmptyListItems prop and reading the docs again now, I think I see a way I can work around it by conditionally inserting that in our items array. Apologies for the distraction 🙇 .