-
Notifications
You must be signed in to change notification settings - Fork 27.5k
Can't write space chars in input when it in tag with ng-click with ngAria since 1.7.3 #16664
Comments
We have the same problem here. When upgrading from 1.7.2 to 1.7.3 all presses of the space key are lost in all input and textarea fields. Maybe there is something wrong with the following change (We do use ngAria, indeed)?:
|
@hoeni problem in ngClick that in ngAria.js. If you are using ngMaterial module than need ngAria module. |
I think you are right @hoeni - this is because of that ngAria change. You can see in this version of the CodePen that pressing space causes the click handler: https://codepen.io/petebacondarwin/pen/OweOYK?editors=1111 I guess we need to ensure that ngAria does not prevent default on input/textarea elements? |
Yeah, Doing this for input/select/textarea elements (except for |
@gkalpak but it's not realy true for all solutions. In my case i have multiple div as row in list and it have some fields and input field. |
Not sure what you mean, @Sergi0Limit 😕 |
I mean... Blocking space chars in my case is this a bug or a feature? |
Preventing tge default browser behavior (i.e. scrolling down) on the divs sounds like the right thing to do, no? |
Focus in the input, not on div. Why it do click instead of space? |
Here are my thoughts on this: However, if you have an input or a button, and on one of its parent elements use ngClick, you don't want this ngClick to be role=button. This is because it's not logical to have two nested buttons. I'd assume screen readers and other assistive technology will have problems with this. HTML actually disallows the nesting of most interactive elements. Of course, a div with a click event is not native interactive content, but once you include ngAria into the mix, you make it "interactive": So I can think of two ways to go from here:
|
In our case, we have a rather complex form generator. If you click a whole form line with SHIFT and ALT pressed, it will open a form inspector (for form debugging by developers). This is the surrounding ng-click. I can confirm that removing the ngClick handler makes the space key work again in contained inputs. On the one hand I can understand that ngAria should clearly regard space key press as a button press and suppress page scrolling when activated. On the other hand I see this as a rather breaking change I would not expect in a minor AngularJS Update without prior heads up. @Narretz :
|
add warning about changed space key in inputs angular#16664
Sorry, It's imo still debatable if this is a breaking change. Nesting interactive elements like this was wrong even before this change. Although we'll probably have to revert this if it turns out many apps are affected. |
@hoeni |
@Narretz |
Hm...I didn't realize this also affects child elements. In that case, I don't think this is a BC worth having. if (keyCode === 13 || keyCode === 32)
- event.preventDefault();
+ if (event.target === elem[0]) event.preventDefault();
scope.$apply(callback);
} We could additionally check whether |
Hm, I don't think labelling this as a BC is correct if we assume that setting ngClick -> input element is incorrect in the first place (with ngAria) I feel like we shouldn't make it easier again to introduce a suboptimal aria state in apps, especially with ngAria included. |
By default, pressing spacebar causes the browser to scroll down. However, when a native button is focused, the button is clicked instead. `ngAria`'s `ngClick` directive, sets elements up to behave like buttons. For example, it adds `role="button"` and forwards `ENTER` and `SPACEBAR` keypresses to the `click` handler (to emulate the behavior of native buttons). Yet, pressing spacebar on such an element, still invokes the default browser behavior of scrolling down. This commit fixes this, by calling `preventDefault()` on the keyboard event, thus preventing the default scrolling behavior and making custom buttons behave closer to native ones. Closes #14665 Closes #16604
Still, having people's apps break like this (in a patch release), is bad imo. |
I tested all of the AngularJS Material docs with 1.7.3 and I don't see any breakages there related to the space key being blocked on any kind of inputs. This is likely due to us not nesting inputs inside of interactive elements. That said, I'm sure that many developers who are using AngularJS Material are doing this. I've seen it in the past (and warned people about it). AngularJS Material recently fixed a related issue with ngAria where it was adding a I would suggest that the release notes should warn developers about this breaking change coming in the future, provide them with clear guidance on why nesting interactive elements is bad, and then move this change to a future release. |
We can add an addtional check as suggested by @gkalpak:
and also possibly check if the target element has aria-roles that make it interactive (i.e. button). This way, we get the better aria support and still allow this use case. |
I'm submitting a ...
Current behavior:
When input/textarea in the wrapped tag with ng-click i can't wrote space chars in the text.
Expected / new behavior:
When the input / textarea in the wrapped tag with ng-click i should be able to write space characters in the text.
Minimal reproduction of the problem with instructions:
Demo https://codepen.io/sergi0limit/pen/mjYLGE
AngularJS version: 1.7.3
Browser: all
Anything else:
commit 6c224a2
The text was updated successfully, but these errors were encountered: