search

soywod / react-pin-field

📟 React component for entering PIN codes.
https://soywod.github.io/react-pin-field/
MIT License
413 stars 24 forks source link

Set up text direction (RTL/LTR) #9

Closed soywod closed 4 years ago

soywod commented 4 years ago

In fact, the component is already right-to-left compatible when adding dir="rtl" to <html>:

ezgif com-optimize (2)

soywod commented 4 years ago

Adjusted onChange and onComplete to match rtl in 304cb359663d84a75ca6a0cb96190588fe39c24f.

tusmenko commented 1 year ago

@soywod I'm considering opening an issue (or even PR), but would like to discuss it with you first - I've faced a limitation when I can't override the global direction defined on level. In my scenario, I would like to have all the pages RTL for Arabic, but keep PinInput LTR, considering that we are still using common numbers (avoiding calling them Arabic, because the Arabic locale has its own numbers))

But seems like passing the dir="ltr" prop to the component is ignored, so the code is passed to onComplete reversed anyway. For now, I'm handling it on BE side, additionally reverting it before check (mess...)

How do you feel, may it have the sense to add such a feature to explicitly defile the direction via props?

soywod commented 1 year ago

I totally agree with you, I would even say that it is a bug (the dir prop should be overridable via props). For now the value is only taken from the DOM: https://github.com/soywod/react-pin-field/blob/388a60b08a5cbb9e7317c9e6ce18aa36017ad5ab/lib/src/pin-field/pin-field.tsx#L233

Feel free to open a PR directly, the bug can be fixed quite easily IMO. If you can't I will try this weekend. Thank you :slightly_smiling_face:

tusmenko commented 1 year ago

Thanks! I've opened a PR