Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Using debounce, does not support submit on enter #8289

Closed
chrismelman opened this issue Jul 22, 2014 · 7 comments
Closed

Using debounce, does not support submit on enter #8289

chrismelman opened this issue Jul 22, 2014 · 7 comments
Assignees

Comments

@chrismelman
Copy link

In a simple form with one field and one button I added a debounce:
ng-model-options="{debounce: {default: 500, blur: 0}}"

I can understand that debounce might break form submit on Enter.

However this is valid usage pattern which should atleast be optional to turn off the blur for an event or something like that.
I expected that the setting blur to 0, would help, but this is not the case

@shahata
Copy link
Contributor

shahata commented Jul 22, 2014

not sure I understand the issue, can you send a plunker example?

@chrismelman
Copy link
Author

after a bit of fighting i got it down to a simple example:

http://plnkr.co/edit/5oP0AhmC7BiFbdzLiaDg

if you type fast and pres enter nothing will happen.
while if you disable the debounce option and do the same it will do a submit.

Expected is that an enter disables the debounce and directly evaluates the input so that it can submit
An other valid option would be a debounced enter as well that only succeeds if the form is still vallid.

the current behavior is not really user friendly and does not allow integration with something like a barcode scanner

@shahata
Copy link
Contributor

shahata commented Jul 22, 2014

Okay. There are two things that needs to be fixed in this plunker so it will work properly:

  1. As described in https://docs.angularjs.org/api/ng/directive/ngModelOptions "Any pending changes will take place immediately when an enclosing form is submitted via the submit event. Note that ngClick events will occur before the model is updated. Use ngSubmit to have access to the updated model." - so instead of ngClick on the button you need to use ngSubmit.
  2. Since the update of the model is debounced, validators do not get executed until the debounce is done (or until the form is submitted), so disabling the submit button using ng-disabled="myForm.$invalid" is a problem. Instead you can use something like ng-submit="myForm.$valid && submit(entry2)", which will prevent invalid value from being submitted, but the button will no longer be disabled. There's an ice-boxed PR (feat(ngModelOptions): add validateOn option #7414) which can allow you to let the validators run on debounced values before they are committed, so if this is important for you, you can vote on it.

Anyway, here's a plunker with the described fixes: http://plnkr.co/edit/c8uJRRzI9Zy2MFjWhOm2?p=preview

@chrismelman
Copy link
Author

Thnx for the workAround, The not working disable is a bit of a problem, but might be good enough for now.

I understand that there is a PR that would fix this problem.

However I disagree with the fact that it is a PR, which on itself is a workAround.

It should be seen as unwanted side-effect of the debounce option, which should be fixed/removed instead of adding an new option

@shahata
Copy link
Contributor

shahata commented Jul 23, 2014

So you are saying that {validateOn: 'default'} should be implicit? This is arguable, I guess. Maybe. Anyway, it can be discussed if validateOn is merged at some point.

@shahata
Copy link
Contributor

shahata commented Jul 23, 2014

/cc @petebacondarwin

@jeffbcross jeffbcross self-assigned this Jul 23, 2014
@jeffbcross
Copy link
Contributor

As described by the docs, and clarified by @shahata, this appears to be working as expected. If I change form to include ng-submit="submit(entry2)", the entry is added immediately and correctly on pressing enter.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants