components
components copied to clipboard
angular
With horizontal listbox, first chip gets focused on parent wrapper click
What is the expected behavior?
".mat-chip-list-wrapper" should not catch click event
What is the current behavior?
When you click outside of the chips in the ".mat-chip-list-wrapper" container that is full width due to flex property, the first chip of the wrapper get selected.
What are the steps to reproduce?
Use the official chips example https://odjogmnnjkj.angular.stackblitz.io/ and click on the far right of the chips. The first chip will get focused.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.2.12, Material 7.3.6, Typescript 3.1.1 Issue found on:
- mac OS High Sierra with Chrome 73.0.3683.86, Safari 12.1, Firefox
- windows 10 enterprise using Chrome 73.0.3683.103, Edge and Firefox 60.6.1esr
Hello @djtahl This seems to be a design implementation. Chip list has own focus logic that switches the focus from the chip-list to the first non-disabled chip. You can see the code and the comments here /* Focuses the first non-disabled chip in this chip list, or the associated input when there are no eligible chips. */
As a user, I was expecting it to focus on the input element instead of the first chip
I'm having trouble to manually disable this "feature". I've put (click)="$event.stopPropagation()" on every single object inside my chip-list, but the behavior just won't change. I cannot accept this focus for my application, since my chip-list has multiple hundred lines and you don't want to jump to the top when you click anywhere....
Is there going to be any mechanism to disable it? Or at least any acceptable workaround?
Eventually I did find a hacky workaround, you can set the mat-chip-list to disabled, and add the css property "opacity: 1;" to the mat-chip element. It will look like before, but all sort of focus is disabled.
However I'm looking forward for a real solution.
I think if you clicked on part of the container near the chips it would be weird if that selected the input, but I agree that clicking past the end of the chips you would expect it to focus the input. Maybe we can adjust the click target for the input so this it occupies that extra space after the chips?
Here is a simple workaround :
::ng-deep.mat-chip.mat-standard-chip:focus::after {
opacity: 0;
}
@MansourFall That work around seems to only visually hide the focus, the page will still scroll and space bar still selects the focused chip. I need something that prevents the scroll/focus all together but does not disable the chips themselves so they can be manually selected still.
I was facing a similar issue recently. I am quite annoyed by how much pumbing we need to put in place to prevent this behavior.
Unfortunately, this is expected functionality. If you want to prevent this from happening, you will need to write a custom MatFormFieldControl and void out the onContainerClick event.
Look here for creating custom form fields: https://v5.material.angular.io/guide/creating-a-custom-form-field-control
Here is a simple workaround :
::ng-deep.mat-chip.mat-standard-chip:focus::after { opacity: 0; }
events are still fired behind the scenes. Some devs might not like that. Also overflow-y: scroll will still have issues.
How is it expected behavior. Even clicking on label focuses first chip. If we do the same in mat-input it focuses inside input. So why can't this be same? At least should provide option to disable this auto-focus on container click.
This is undesired behavior for our product. Why not provide an option to disable this functionality instead of requiring us to write hacky solutions?
Hello folks,
<mat-chip-listbox\> implements ARIA listbox pattern. We have requirement to follow accessibility criteria (such as WCAG) and use correct ARIA structure. I believe
From ARIA Authoring Practices Guide (APG) Listbox Pattern
For a vertically oriented listbox:
When a single-select listbox receives focus: If none of the options are selected before the listbox receives focus, the first option receives focus. Optionally, the first option may be automatically selected. If an option is selected before the listbox receives focus, focus is set on the selected option.
We have to follow Accessibility requirements, so I don't think this is something we can change for mat-chip-listbox.
If you need non-interactive chips, you can use mat-chip-set.
Best Regards, Zach
https://material.angular.io/components/chips/overview
I believe vertical is working as intended. I do not know off the top of my head if ARIA requires vertical and horizontal listbox to work the same way when the listbox itself is focused.
I believe vertical mat-chip-listbox is working as intended. I updated the title to clarify that this is specifically for horizontal chips so this issue can get more attention.