Skip to content

fix(input, textarea): inputs now scroll into view when tapping labels#25848

Merged
liamdebeasi merged 7 commits intofeature-7.0from
scroll-assist-activate
Sep 9, 2022
Merged

fix(input, textarea): inputs now scroll into view when tapping labels#25848
liamdebeasi merged 7 commits intofeature-7.0from
scroll-assist-activate

Conversation

@liamdebeasi
Copy link
Copy Markdown
Contributor

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
    • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Issue URL: N/A When fixing #18532 I noticed that using the accessory bar or a label to focus inputs did not cause scroll assist to activate. This is because scroll assist was listening for touchend events on the input element itself to determine when to activate. This code was added a while ago (ionic-team/ionic-v3@c10f72b) and may have had to work around platform level bugs which may be why touchend was used instead of focusin.

What is the new behavior?

  • Scroll assist now activates when an input is about to receive focus via the focusin event

Does this introduce a breaking change?

  • Yes
  • No

Other information

Tapping label before and after

before after
before.MP4
after.MP4

Accessory bar next/prev before and after

before after
before.MP4
after.MP4

@github-actions github-actions Bot added the package: core @ionic/core package label Aug 29, 2022
@liamdebeasi liamdebeasi marked this pull request as ready for review September 2, 2022 21:48
@liamdebeasi liamdebeasi requested a review from a team September 2, 2022 21:48
@liamdebeasi liamdebeasi merged commit cb265d6 into feature-7.0 Sep 9, 2022
@liamdebeasi liamdebeasi deleted the scroll-assist-activate branch September 9, 2022 14:51
pull Bot pushed a commit to LoadsAForks/ionic-framework that referenced this pull request May 8, 2026
…ic-team#31124)

Issue number: resolves ionic-team#30412

---------
## What is the current behavior?

When a user listener bound to `ion-input` or `ion-item` receives a tap
that requires scroll assist to scroll the input into view, the click
handler fires twice. Programmatic `setFocus()` and keyboard focus into
an offscreen input also dispatch a phantom click event the developer
didn't request.

The cause is `scroll-assist.ts`: after `relocateInput` moves the native
input, a RAF-scheduled `componentEl.click()` re-emits a click on the
host. That recovery was added in ionic-team#22845 (Feb 2021) to fix ionic-team#21871, when
scroll assist drove focus from its own touchstart/touchend listeners and
`relocateInput` ran during the in-flight click event's lifecycle.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

The RAF recovery click is removed. ionic-team#25848 (Sep 2022) restructured scroll
assist to react to `focusin` rather than drive focus from touch events,
so `relocateInput` now runs strictly after the click event has finished
propagating. Combined with `ion-input`'s click capture handler and
`ion-item`'s click-on-padding handler from ionic-team#30373 (April 2025), the
click is always dispatched on the component host before scroll assist
runs. Re-firing it produced duplicate clicks for user interactions and
phantom clicks for programmatic and keyboard focus.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information


Regression coverage in
`core/src/components/input/test/item/scroll-assist-double-click.e2e.ts`
covers four cases on iOS Mobile Safari and Mobile Chrome: padding click,
direct input click, programmatic `setFocus()`, and keyboard focus. The
first two assert one click event; the last two assert zero. All four
fail without this change and pass with it.

Preview:
-
https://ionic-framework-git-fw-6540-ionic1.vercel.app/src/utils/input-shims/hacks/test?ionic:mode=ios
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants