search

sanusart / react-dropdown-select

Customisable dropdown select for react
https://react-dropdown-select.netlify.app/
MIT License
352 stars 82 forks source link

How do I cancel the selected value #206

Closed Harikrishnan-Prabhakar closed 2 years ago

Harikrishnan-Prabhakar commented 2 years ago

I have selected an option from dropdown. For certain reason, I don't want the selected option. I want to change the selected option to some other option. How to do that?

Ex: I have a dropdown to select month. The user selected month (say Jan) is not valid, since user is not allowed to select month before current date (assume current month is Feb). So I want to change the selected option to Feb when Jan is selected. My code sets the selected value properly to Feb, but the dropdown is not updated.

Pls note, I cannot disable the options in dropdown. When invalid option is selected I need to reset the option to some other valid option. Is this possible kindly update.

sanusart commented 2 years ago

https://sanusart.github.io/react-dropdown-select/examples#External-clear-and-add

On Wed, 26 Jan 2022, 7:38 pm Harikrishnan Prabhakar, < @.***> wrote:

I have selected an option from dropdown. For certain reason, I don't want the selected option. I want to change the selected option to some other option. How to do that?

Ex: I have a dropdown to select month. The user selected month (say Jan) is not valid, since user is not allowed to select month before current date (assume current month is Feb). So I want to change the selected option to Feb when Jan is selected. My code sets the selected value properly to Feb, but the dropdown is not updated.

Pls note, I cannot disable the options in dropdown. When invalid option is selected I need to reset the option to some other valid option. Is this possible kindly update.

— Reply to this email directly, view it on GitHub https://github.com/sanusart/react-dropdown-select/issues/206, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACBLRVW2QSWE3XYABQHD2DUYAWTBANCNFSM5M3VJJMQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you are subscribed to this thread.Message ID: @.***>

Harikrishnan-Prabhakar commented 2 years ago

This dynamic update is not working, if you change the options on the onChange callback. I have created a sandbox to show the issue, please check.

https://codesandbox.io/s/external-clear-forked-nlot7

I think the problem happens because of the comparison in componentDidUpdate method, where we compare prevProps.values, prevState.values. I haven't debugged it, but just a thought. I hope my requirement is a valid scenario. Kindly let me know your thoughts.

sanusart commented 2 years ago

Is it working for you on the example?

On Thu, 27 Jan 2022, 7:51 am Harikrishnan Prabhakar, < @.***> wrote:

This dynamic update is not working, if you change the options on the onChange callback. I have created a sandbox to show the issue, please check.

https://codesandbox.io/s/external-clear-forked-nlot7

I think the problem happens because of the comparison in componentDidUpdate method, where we compare prevProps.values, prevState.values. I haven't debugged it, but just a thought. I hope my requirement is a valid scenario. Kindly let me know your thoughts.

— Reply to this email directly, view it on GitHub https://github.com/sanusart/react-dropdown-select/issues/206#issuecomment-1022871422, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACBLRRATROGYHC6OATUP2LUYDMPJANCNFSM5M3VJJMQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

sanusart commented 2 years ago

Update the lib version on the sandbox. You using v3.x there

On Thu, Jan 27, 2022 at 10:16 AM Sasha Khamkov @.***> wrote:

Is it working for you on the example?

On Thu, 27 Jan 2022, 7:51 am Harikrishnan Prabhakar, < @.***> wrote:

This dynamic update is not working, if you change the options on the onChange callback. I have created a sandbox to show the issue, please check.

https://codesandbox.io/s/external-clear-forked-nlot7

I think the problem happens because of the comparison in componentDidUpdate method, where we compare prevProps.values, prevState.values. I haven't debugged it, but just a thought. I hope my requirement is a valid scenario. Kindly let me know your thoughts.

— Reply to this email directly, view it on GitHub https://github.com/sanusart/react-dropdown-select/issues/206#issuecomment-1022871422, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACBLRRATROGYHC6OATUP2LUYDMPJANCNFSM5M3VJJMQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

Harikrishnan-Prabhakar commented 2 years ago

The example is working fine. But the way I'm trying to use is slightly different from the given example. I have updated to the latest version "4.8.2." in the code sandbox and checked it. But, facing the same issue.

sanusart commented 2 years ago

I'd suggest to use side effect in that case https://codesandbox.io/s/react-dropdown-select-forked-1qezi?file=/src/index.tsx