search

eBay / ebayui-core-react

eBayUI React components
https://opensource.ebay.com/ebayui-core-react/main/
MIT License
27 stars 29 forks source link

EbaySwitch: Controlled prop not working #296

Open maxrchung opened 9 months ago

maxrchung commented 9 months ago

The EbaySwitch component allows a checked prop to control its value, but on change this prop does not get enforced properly. Other controlled components like EbayCheckbox don't have this issue. I have a small sandbox and demo video to demonstrate issue: https://codesandbox.io/p/sandbox/dreamy-wozniak-xqlpqc?file=%2Fsrc%2FApp.tsx%3A10%2C32

https://github.com/eBay/ebayui-core-react/assets/3955187/63db2a94-dd9d-4cf3-be2a-b03debb1709d

I need this component to be controlled so I can set its state as a part of making an API call. Here is my flow:

  1. Toggle switch on.
  2. Make API call.
  3. Disable switch while call is in progress.
  4. Enable switch when call finishes.
  5. Toggle switch on/off depending on API result.

With the current component I can't do step 5 as the component will always change the switch's states. I could do something kind of funny like throw an exception in my change handler but I that's probably not advised.

I will try and open a corresponding PR to fix this change.

darkwebdev commented 9 months ago

@maxrchung thanks for the issue! I've fixed your sandbox example: https://codesandbox.io/p/sandbox/billowing-forest-m55jr6?file=%2Fsrc%2FApp.tsx%3A24%2C20

But I agree, behavior looks inconsistent....

maxrchung commented 9 months ago

I've fixed your sandbox example: https://codesandbox.io/p/sandbox/billowing-forest-m55jr6?file=%2Fsrc%2FApp.tsx%3A24%2C20

Thanks, but maybe I am misunderstanding, how does this fix the sandbox? I was trying to show that the controlled property wasn't working.