shipshapecode / shipshapecode/shepherd

Targeted input loses focus on android and ios devices

Open
#1,143 38 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
13.8k
Forks
658
Avg merge
4d 5h
Merged PRs (30d)
15

Description

Hey, I am having a weird issue in mobile devices that I cannot figure out.

Basically I have one step that targets an input element, and it is expected that the user types something to proceed to the next step.

This works fine when trying on desktop, but on android or ios when I click the input element to start typing the input immediately loses focus. On android is very obvious that the keyboard shows for a little bit and disappears

Here's a simple codesanbox showing the issue:
https://codesandbox.io/s/silly-ritchie-o0w88?file=/src/index.js

The issue doesn't appear in the browser's responsive mode, only in the actual devices.

One thing that I noticed is that If I remove the 'shepherd-element' element from the dom it works fine. Not sure if this indicates something relevant

Thanks

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the CodeSandbox reproduction at src/index.js and run it on physical Android and iOS devices, comparing behavior with and without the shepherd-element. Confirm the focus loss and keyboard dismissal, then isolate the change needed so the targeted input stays focused while the tour element remains present.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.