Notification drawer example dropdown kebab broken

[skateman]

I was playing with the notification drawer example and found two issues, in notification-body.html:

• The dropdownKebabRight ID is being used in the repeated region, i.e. possibly generates duplicate IDs
• The data-toggle="dropdown" attribute on the <button> conflicts with the JS provided by bootstrap. This causes the kebab to activate after a second click only.

[dtaylor113]

...This causes the kebab to activate after a second click only.

Hi @skateman, sorry, I'm not seeing this behavior? The kebab opens on the first click for me (using Chrome)?

[skateman]

@dtaylor113 oh, you're probably not including the original bootstrap JS on the page. I spend an hour with @Hyperkid123 when we found why it wasn't working in MiQ 😆

[dtaylor113]

Hi @skateman, ok I removed data-toggle="dropdown" from the <button/> in notification-body.html for the Notification Drawer ngDoc example and the kabob menu continues to work on a single click.
<button/> in notification-body.html still has uib-dropdown-toggle which I believe is the correct angular-ui bootstrap attribute.

I'll work on dropdownKebabRight ID issue next.
Thanks,
Dave

[skateman]

@dtaylor113 yes, the uib-dropdown-toggle is okay, I fixed the attribute to the data-toggle above, sorry and thanks

[dtaylor113]

I fixed the attribute to the data-toggle above, sorry

Sorry, where did you fix it?

[skateman]

@dtaylor113 in the PR description I had dropdown-toggle instead of data-toggle="dropdown"

[dtaylor113]

Hi @skateman, do you need id="dropdownKebabRight"? I removed it from notification drawer example, and the example and our unit tests continue to work correctly.

[skateman]

Not sure about the aria- prefix on the dropdown content, it has probably some semantic value. Ideally here you would have to generate a dynamic ID for each notification as we do it here. I know it's not pretty, but it would be nice if we could prevent people from copy-pasting bad stuff (we have a bunch of copy-pasted PF examples that cause duplicate ID issues and that makes QE cry sometimes).

[dtaylor113]

I'm still not sure that example generates a unique id across all kabob action dropdowns. It's based on notification.id, where it should be something like 'dropdownKebabRight-{{ notification.id }}-{{ notification.action.id }}' because there may be mutliple actions per notification.

[skateman]

Yup, but only one dropdown per-notification and the ID belongs to the dropdown.

[dtaylor113]

ah, yes, correct, it's been a while :-)