search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.58k stars 799 forks source link

Instant Search: Unable to type in Flatsome theme search field overlay on mobile #20601

Open annacmc opened 3 years ago

annacmc commented 3 years ago

Steps to reproduce the issue

  1. Install the Flatsome theme on a site with Instant Search enabled.
  2. Ensure Search Input Overlay Trigger setting is set to Instant Search setting Open when user starts typing
  3. Whilst holding the device in portrait (not landscape) orientation, perform a search to open the search modal using the Flatsome theme provided search field from a mobile device (on mobile this is found by clicking the hamburger menu in the top left to reveal the search field)
  4. Try to type a search term into the field
  5. Once the overlay opens, try to adjust your search term, or to click 'clear' and enter a new search term without closing the overlay first.

What I expected

I expect that entering the first letter into the search field will open the overlay, which will continue to allow me to type the remainder of my search term into the field.

I expect to be able to search for a full word, more than one letter.

I also expect I will be able to add, remove, alter my search term; as well as be able to tap on 'clear' and then type in a new word in without needing to 'x' out of the overlay and re-opening the search.

What happened instead

Entering the first letter into the search field correctly triggered the overlay. However, no additional letters were able to be added, and it was not possible to add/edit/change the text in the search field. Tapping on 'clear' does clear the field, however it's not possible to add any additional text even after clearing.

Screenshots Screencast of the experience taken from a mobile browser simulator (experiences matches that on my actual iPhone 11 mobile device, tested on Firefox/Safari/Chrome)

Screencast: https://d.pr/v/B4NkKy

annacmc commented 3 years ago

This issue is occurring across all browsers, on both desktop and mobile. However, it is only an issue with Flatsome's built in search field on the off-canvas side menu which is available via hamburger menu on smaller displays. The issue doesn't exist in other widget areas or search fields on the page.

image

It looks like this is related to the tabindex="-1" value on the following div (output by the Flatsome theme): <div class="mfp-wrap mfp-auto-cursor off-canvas off-canvas-left mfp-ready" style="overflow: hidden auto;" tabindex="-1">

As removing the tabindex from this div resolves the issue (note that changing the tabindex to 0, or any other value does not resolve it) so perhaps a solution to this problem lies in removing the tab index from this element.