I use antD select and I provide the options and onSelect but when I am scrolling the options are getting replaced by 1 particular option.
The options are an array of objects and its imported from a json file and as you can see below are timezones.
I tried scrolling to the top and bottom of the options and every time I scroll the options are getting changed. Not all together but 1 or 2 every time I scroll.
<Select
onSelect={(_, option) => dispatch(setTimezone(option))}
options={timezones}
showSearch
style={{ width: "100%" }}
/>
2
Answers
I am importing the timezones like this.
import timezones from "../../lib/data/timezones.json";
the timezones is an array of objects like you said!
[ { "value": "GMT Standard Time", "offset": 0, "label": "(UTC+00:00) Edinburgh, London", "utc": [ "Europe/Isle_of_Man", "Europe/Guernsey", "Europe/Jersey", "Europe/London" ] }, { "value": "British Summer Time", "offset": 1, "label": "(UTC+01:00) Edinburgh, London", "utc": [ "Europe/Isle_of_Man", "Europe/Guernsey", "Europe/Jersey", "Europe/London" ] }, ]
It would be easier to help if you provided a little bit more code.
I’m assuming that you import the timezones into a variable and that you don’t change that variable anywhere else in the code.
It would be useful to see how you import the timezones as well.
With this little information, what i can tell you is that you need to make sure that:
You are not importing timezones multiple times, adding more and more options.
Your options structure should be {"value": .., "label": ..}
It might help to put the prop optionFilterProp="label" on your select.
Hope this helps