Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Search functionality not working correctly on react.dev in Safari on iOS real device (iPhone 12 Pro) #6693

Closed
MeetYourCreator opened this issue Mar 12, 2024 · 4 comments · Fixed by #6743

Comments

@MeetYourCreator
Copy link
Contributor

Summary

The current behavior

Search functionality does not work correctly on iOS real device (iPhone 12 Pro).

react_github-bug-report_current-behavior-1.mov

Since search functionality is currently working as expected on macOS, both in Chrome and Safari, the issue might be in implementation of Algolia InstantSearch iOS:

react_github-bug-report_current-behavior-2.mov

The expected behavior

Search functionality is working as expected on macOS, both in Chrome and Safari. Should work similarly on iOS real device:

macOs Chrome

search-functionality_chrome-macOS-v14.3.1.mp4

macOS Safari

search-functionality_safari-macOS-v14.3.1.mp4

Page

https://react.dev

Details

Steps To Reproduce

  1. Open react.dev in Safari on iPhone (real device)
  2. Tap search icon: note that search function is working as intended
  3. Scroll down to "Write components with code and markup" section
  4. Tap search icon: note that action doesn't open search
  5. Scroll down again and tap the search icon several times: note that action doesn't open search
  6. Repeat step 5: note that eventually screen freezes

The iOS real device that this behavior was recorded on is using the current iOS version:

react_github-bug-report_ios-version

@MeetYourCreator
Copy link
Contributor Author

Hi @pwbriggs👋
I was wondering if I could open a pull request and begin work on this issue.

@pwbriggs
Copy link

Go ahead, @MeetYourCreator! Thanks in advance for the help!

@MeetYourCreator
Copy link
Contributor Author

MeetYourCreator commented Apr 8, 2024

Hi @pwbriggs 👋
I'm about to open a PR for this bug-fix. Since it's my first time contributing, I just want to make sure I have the right protocol for opening a PR for this repo:

  1. fork repo
  2. clone forked repo to local machine
  3. git checkout -b my-branch-name
  4. when ready, git push my-fork-name my-branch-name

@pwbriggs
Copy link

pwbriggs commented Apr 8, 2024

Yes, that's correct. Commit the changes to the branch on your fork, then open your fork on GitHub. You should see a message something like this:

image

Hit the "Contribute" button to start a pull request. Include "Fixes #6693" in the description so GitHub will automatically link it to this issue.

Thanks again! ❤️

rickhanlonii pushed a commit that referenced this issue Apr 10, 2024
* change isOpen variable in TopNav component to isMenuOpen to differentiate from isOpen props in Search component

change setIsOpen to setIsMenuOpen in TopNav component

* move initialization of ShowSearch state to top-level of TopNav component

organize hook initializations in TopNav component: useState, useRef, useRouter

* remove initialYScroll prop from DocSearchModal component to fix search functionality on ios devices
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants