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.

Sign up for GitHub

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

Jump to bottom

bug: iOS Scroll Assist - Focus on ion-input cloned input moves input up visually #27249

Closed
3 tasks done
japeacock opened this issue Apr 20, 2023 · 3 comments · Fixed by #27253
Closed
3 tasks done

bug: iOS Scroll Assist - Focus on ion-input cloned input moves input up visually #27249

japeacock opened this issue Apr 20, 2023 · 3 comments · Fixed by #27253
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@japeacock
Copy link

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

The issue is when focusing on an input the input seems to visually 'jump' or 'move up'. Looked at the DOM and this looks like it could be related to the 'cloned-input' that gets added on focus.

Using Ionic React version 7 with the latest IonInput syntax for label and label placement.

Running the app on iOS on real devices:

  • iPhone 12 Mini - Version 16.2
  • iPad 10th Gen - Version 16.3.1
  • Other emulators for iOS

The problem doesn't seem to be an issue on Android.

Video of behaviour:
https://user-images.githubusercontent.com/10227063/233318903-f1919a2d-626f-47c6-aa4c-fbae69c2885d.MP4

Expected Behavior

On input focus the input shouldn't jump / move up.

Steps to Reproduce

  1. Testing on iOS real device or emulator
  2. Load project up
  3. Attempt to focus on either inputs (pin input seems to do it the most)
  4. Try focusing back and forth on the inputs

Code Reproduction URL

https://github.com/PleoCreative/ion-input-focus-bug

Ionic Info

Ionic:

Ionic CLI : 7.0.1 (/Users/Jacques/.nvm/versions/node/v16.15.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.0.3

Capacitor:

Capacitor CLI : 4.7.3
@capacitor/android : not installed
@capacitor/core : 4.7.3
@capacitor/ios : 4.7.3

Utility:

cordova-res : 0.15.4
native-run : 1.7.2

System:

NodeJS : v16.15.0 (/Users/Jacques/.nvm/versions/node/v16.15.0/bin/node)
npm : 9.6.5
OS : macOS Unknown

Additional Information

Found this issue, but not sure if they are related:

#25853
@ionitron-bot ionitron-bot bot added the triage label Apr 20, 2023
@liamdebeasi liamdebeasi self-assigned this Apr 20, 2023
@liamdebeasi liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report labels Apr 20, 2023
@liamdebeasi liamdebeasi removed their assignment Apr 20, 2023
@ionitron-bot ionitron-bot bot removed the triage label Apr 20, 2023
@liamdebeasi liamdebeasi mentioned this issue Apr 20, 2023
Merged
2 tasks
@liamdebeasi
Copy link
Member

Thanks for the report. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/react@7.0.4-dev.11681997747.19c57bd1 @ionic/react-router@7.0.4-dev.11681997747.19c57bd1

@japeacock
Copy link
Author

Hi Liam, thank you for your speedy response. I can report that this does indeed fix the issue! :)

Thanks

@amandaejohnston amandaejohnston mentioned this issue Apr 20, 2023
Closed
3 tasks
liamdebeasi added a commit that referenced this issue Apr 20, 2023
@liamdebeasi
fix(ios): scroll assist sizes input correctly (#27253)
a874992 
Issue number: resolves #27249

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The cloned input/textarea for scroll assist is not sized correctly. For
legacy inputs, this causes the clone to be off by ~1px because it does
not have the correct height. For modern inputs, this causes the same bug
as the legacy inputs plus cloned inputs overlap any floating/stacked
labels. This was not a concern for legacy inputs because those inputs
did not contain the label element where modern inputs do.

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

- Sets `bottom: 0` for cloned inputs so they have the correct height
- Sets `position: relative` on the `.native-wrapper` so the cloned input
does not flow outside of the parent container.

**Before**

| Modern Input | Legacy Input |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233385644-3c15f98e-2646-41e1-b206-34c505791bde.MP4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233385681-8d682222-44b4-4cdc-b0de-96ed3fd38792.MP4"></video>
|


(Note: The legacy input bug is subtle -- the input only shifts by ~1px)

**After**

| Modern Input | Legacy Input |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233385911-243dea95-39b4-4d81-bfe9-26e52382a702.mp4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233386237-2c9eede3-ca91-429b-8a35-15428529a883.mp4"></video>
|


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
@ionitron-bot
Copy link

ionitron-bot bot commented May 20, 2023

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 20, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ios): scroll assist sizes input correctly ionic-team/ionic-framework
2 participants
@liamdebeasi @japeacock