[Bug]: Picker does not keep up with changes to icons in its menu items

[estollnitz]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Picker

Expected behavior

When there's a change to the src attribute of an sp-icon used within a menu item, the selected item displayed by the picker should update to reflect the modified icon.

Actual behavior

Picker displays a stale icon associated with the selected menu item when the icon has changed to a new src value. The menu items shown in the popover are correct; only the copy shown in the picker button itself is stale.

Screenshots

What browsers are you seeing the problem in?

Firefox, Chrome, Safari, Microsoft Edge

How can we reproduce this issue?

See the sample code below. It displays repro steps that are easy to follow.

Sample code or abstract reproduction which illustrates the problem

https://studio.webcomponents.dev/edit/wF3pii8z9xOpdkyufNqu/src/index.ts?p=stories

Severity

SEV 3

Logs taken while reproducing problem

No response

[estollnitz]

I think the issue stems from MenuItem caching a clone of its icon the first time that Picker requests the itemChildren getter here: https://github.com/adobe/spectrum-web-components/blob/main/packages/menu/src/MenuItem.ts#L196. The result gets put into MenuItem's _itemChildren cache, and that cache is not invalidated when I update the src attribute of an sp-icon. The cache is only invalidated when the MutationController sees a change to characterData or childList or subtree and then calls breakItemChildrenCache here: https://github.com/adobe/spectrum-web-components/blob/main/packages/menu/src/MenuItem.ts#L218.

[estollnitz]

Seems like a relatively simple fix would be to include either attributes: true or (if you want to be more specific) attributeFilter: ['src'] in the config for the MutationController here: https://github.com/adobe/spectrum-web-components/blob/main/packages/menu/src/MenuItem.ts#L218.

[estollnitz]

I confirmed that calling the breakItemChildrenCache method of each MenuItem whenever I update its icon will indeed cause the Picker to display the correct icon. I wrote this hacky workaround to call the protected breakItemChildrenCache method:

    const menuItems = this.shadowRoot.querySelectorAll('sp-menu-item')
    for (const menuItem of menuItems) {
      (menuItem as any).breakItemChildrenCache();
    }

Of course, this is just a workaround — I should not have to call a protected method of a class I don't own.