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

fix(input): clearOnEdit clears input when user initially types #26005

Merged
merged 12 commits into from
Oct 10, 2022

Conversation

sean-perkins
Copy link
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?

The ion-input field does not initially clear when clearOnEdit is enabled, with a default value, when the control is first focused and modified.

ionInput can emit an detail of undefined.

Issue URL: Internal

What is the new behavior?

  • ion-input with clearOnEdit enabled will clear the input when the control receives focus and is modified
    • It will not clear if the user presses "Enter" to submit a form.
    • It will not clear for subsequent input while the control has focus (e.g. does not clear on each keypress).
  • ionInput correctly emits the parent event as the detail.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@github-actions github-actions bot added the package: core @ionic/core package label Sep 23, 2022
@@ -432,37 +434,17 @@ export class Input implements ComponentInterface {
this.isComposing = false;
};

private clearTextInput = (ev?: Event) => {
private onClearButtonClick = (ev?: Event) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed this function as it is the click handler for the button and should not be re-used directly by other parts of the implementation.

Instead if inner behavior needs to be shared, there should be another private function that both implementations call.

* Otherwise the value will not be cleared
* if user is inside the input
*/
if (this.nativeInput) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change was made 3 years ago. I am unable to replicate the original bug: #17055 with this removed.

@github-actions github-actions bot added the package: angular @ionic/angular package label Sep 23, 2022
core/src/components/input/input.tsx Outdated Show resolved Hide resolved
* Clear the input if the control has not been previously cleared during focus.
* Do not clear if the user hitting enter to submit a form.
*/
if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This causes the value to be cleared when pressing keys like Ctrl and Shift that don't actually "type" anything. Not sure whether that's desired behavior.

core/src/components/input/test/basic/input.e2e.ts Outdated Show resolved Hide resolved
@sean-perkins
Copy link
Contributor Author

Ok, this PR is updated to align with the conversations we had on the textarea clearOnEdit PR: #26006

@sean-perkins sean-perkins merged commit bf5e118 into feature-7.0 Oct 10, 2022
@sean-perkins sean-perkins deleted the fix/input-event-undefined branch October 10, 2022 18:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: angular @ionic/angular package package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants