furqanZafar / react-selectize

http://furqanzafar.github.io/react-selectize/
Apache License 2.0
704 stars 138 forks source link

Default to create search #67

Closed tgoldenberg closed 8 years ago

tgoldenberg commented 8 years ago

I am using "react-selectize": "^0.5.0", and I want the options dropdown to highlight the create search value if there is one unless the user specifies otherwise. I noticed that there is a default to first option in later versions of the package but I want to stay in this version (I have had several bad experiences upgrading). Any suggestions on how I can implement this with this version of the package? Thank you, the help is appreciated!

furqanZafar commented 8 years ago

you want to highlight the new option as the user types in the search field? or you want to highlight an option in the dropdown menu that has been created by the user (after he selects "Add xyz ...")? please elaborate.

I have had several bad experiences upgrading

what bad experiences did you have while upgrading?

tgoldenberg commented 8 years ago

Hi @furqanZafar, I want the new option to highlight whenever the user types in the search field. Currently, the first option is being bypassed by the highlighter and it is highlighting the closes match in the options. For example, the user types in face. The dropdown shows add face... but highlights Facebook below it. I want it to default to highlighting add face... unless the user clicks on a different one or uses the directional keys down or up.

tgoldenberg commented 8 years ago

I've tried hackish jQuery solutions to no avail. Also, since the code is not written in very understandable ES6, it is hard for me to customize. I wish there was a version that was straightforward and easy to understand for React ES6... i.e. class MultiSelect extends React.Component{....

tgoldenberg commented 8 years ago

Seriously considering alternatives because of how confuscated the code is. Can there be a version / tag with regular ES6 syntax in addition to the livescript / hard-to-understand js that gets compiled? That would make the package easier to contribute to as well.

furqanZafar commented 8 years ago

lol thanks for the feedback, will look into creating an ES6 version, you can get the desired effect in the latest version using:

firstOptionIndexToHighlight = {() => 0}

sadly, version 0.5.0 doesn't support this

tgoldenberg commented 8 years ago

Yeah, when I upgrade to 0.9.0, everything breaks - the functionality, the styles, everything. I really hope you are able to get an ES6 version of this to make sense of using the package. At this point, definitely not backwards compatible @furqanZafar

tgoldenberg commented 8 years ago

I notice that there is a property of MultiSelect that is called firstOptionIndexToHighlight. Is there any way I can use this to achieve the result?

tgoldenberg commented 8 years ago

I'm going to try forking the repo at v5.3.0 and editing the part in ReactSelectize.js, under highlightAndScrollToSelectableOption --- if (direction == 0) { index = 0; }