Skip to content
This repository has been archived by the owner on Jul 19, 2019. It is now read-only.

autoHighlight is not always highlighting the top match #239

Closed
OliverBroszat opened this issue May 23, 2017 · 6 comments · May be fixed by #294
Closed

autoHighlight is not always highlighting the top match #239

OliverBroszat opened this issue May 23, 2017 · 6 comments · May be fixed by #294

Comments

@OliverBroszat
Copy link

The top match is only highlighted if it is compared to a String with the exact same beginning.

For Example if I want to search for "123" it will only be highlighted if I enter "1" and it is not being highlighted if I write "2" or "3" in the input field.

@CMTegner
Copy link
Collaborator

The current implementation is equivalent to String#startsWith. We don't have any plans to change this in v1, but it is on our things to consider for future versions.

@silicakes
Copy link

silicakes commented Aug 7, 2017

@CMTegner - i see the line right here:
https://github.com/reactjs/react-autocomplete/blob/master/lib/Autocomplete.js#L352

 const itemValueDoesMatch = (itemValue.toLowerCase().indexOf(
        value.toLowerCase()
      ) === 0)

Why is it difficult to change it to something like:

 const itemValueDoesMatch = (itemValue.toLowerCase().includes(
        value.toLowerCase()))

@CMTegner
Copy link
Collaborator

CMTegner commented Aug 7, 2017

It's not difficult, we just don't intend on changing the behaviour at the moment. When we eventually do, we will want to create something that is flexible enough to cater to different needs, and not just a single use case.

@silicakes
Copy link

silicakes commented Aug 8, 2017

@CMTegner - I've forked the repo, added a predicate support, which is essentially a function receiving itemValue: String and inputValue: String and should return a boolean result,
You can see it here:
master...madlandev:master

It's not possible for me to create a fork since I've included the build files for our own modules, but should you desire, I can create one for you guys.

@ryansully
Copy link

@silicakes Would you be interested in submitting a PR with your changes to implement this? It seems like it should be expected functionality.

@BeauCarrel
Copy link

I've found a "solution" for my use case, I just want it to select the first in the list by default, so that the user can hit enter and it will select the first in the list, for the getItemValue(item) just return the input query, that way the first always matches the default match and is selected until the user starts navigating with the arrow keys.
It's not pretty but it works for my use case :)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
5 participants