fix(SearchBox): RTL support

[ShaMan123]

dir="auto" for rtl auto support

Algolia is AMAZING!!

Thanks

Summary

There is no access to the underlying input element, not able to pass props. dir="auto" is safe for all use cases

Result

[ShaMan123]

workaround

 document.getElementsByClassName('ais-SearchBox-input')[0].setAttribute('dir', 'auto');

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6a9d7bf0d0c96c34f24a895f478f51fa78cb9752:

Sandbox	Source
react-instantsearch-app	Configuration
hooks-example	Configuration

[algobot]

✅ Deploy Preview for react-instantsearch ready!

Name	Link
🔨 Latest commit	6a9d7bf0d0c96c34f24a895f478f51fa78cb9752
🔍 Latest deploy log	https://app.netlify.com/sites/react-instantsearch/deploys/63973e18130f75000847a6fc
😎 Deploy Preview	https://deploy-preview-3037--react-instantsearch.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Haroenv]

this is an interesting PR, we need to do some more checks to see if this is sufficient in every case, but I think in the mean time a different workaround is: .ais-SearchBox-input { direction: auto } via css. Do you confirm that also works?

[ShaMan123]

Unfortunately not. css doesn't support auto value

[Haroenv]

Sorry for the delay here, we were testing this in other flavours. I'm in favour of adding this attribute by default. Do you think you can update the relevant tests @ShaMan123? Thanks!

[ShaMan123]

Maybe. Could you point me to the relevant tests?

[Haroenv]

The snapshot tests are here https://app.circleci.com/pipelines/github/algolia/react-instantsearch/1077/workflows/2876d94c-986f-485d-b16c-ea4073c9c131/jobs/44752 @ShaMan123 :)

[ShaMan123]

@Haroenv I think it's done.

[Haroenv]

We are thinking slightly about whether just this input change is enough @ShaMan123, would you in hebrew expect the icons to be positions reversely too or not?

[shortcuts]

Would you in hebrew expect the icons to be positions reversely too or not?

@Haroenv I didn't found much search resources but it looks like only the text position itself changes

[ShaMan123]

I would expect the text to be positioned to the right and the icons to left.

בתאריך יום ה׳, 6 במאי 2021, 14:33, מאת Clément Vannicatte ‏< @.***>:

Would you in hebrew expect the icons to be positions reversely too or not?

@Haroenv https://github.com/Haroenv I didn't found much search resources https://www.maariv.co.il/#/search;query=test but it looks like only the text position itself changes

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/algolia/react-instantsearch/pull/3037#issuecomment-833451789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4KO46TGLNPKQZU7DYTTMJ47HANCNFSM4ZUQCTAA .

[sarahdayan]

@ShaMan123 We're in the process of moving algolia/react-instantsearch to our InstantSearch monorepo. This PR won't be transferrable, so I'll close it here, but please feel free to reopen it once the migration is done.