We've been able to reproduce this issue on all Safari versions >= 16.4, including Technology Previews. Given: a <select> with multiple <option>s, and behavior on the webpage that modifies the innerText of said <option>s 1. Trigger an event that modifies an option's `innerText` (in particular, the `selected` one, whether implicitly or explicitly selected) 2. Observe that the text does not update 3. Click or otherwise focus the `select` 4. Now the text _does_ update. Codepen demonstrating the issue (Works on < 16.4; broken on >= 16.4) https://codepen.io/jdl90/pen/KKGpXax
16.4 release notes have this line (not referring to any commit or anything, so idk how far back the change goes): "Fixed updating Text node children of an option element to not reset the selection of the select element." Seems like a possible place to look for the source of this regression.
Another note: Given a reference to the `<select>`, this is a partial workaround: ``` const theSelect = document.querySelector('select#theSelect'); const theOption = document.querySelector('option#theOption'); theOption.innerText = 'Some new text'; if (theOption.selected) { theSelect.value = null; theOption.selected = 'selected'; } ``` The label of the <select> control _does_ update, however the control does not expand to contain the full length of that label until the select control is clicked or otherwise focused.
I can reproduce with the latest Safari. The issue doesn't reproduce in Chrome. Thanks for the test case, I'll see if I can bisect this.
This is a regression from Ahmad's 255086@main.
<rdar://problem/107838336>
Pull request: https://github.com/WebKit/WebKit/pull/12577
Committed 262791@main (d86fed1a2d3d): <https://commits.webkit.org/262791@main> Reviewed commits have been landed. Closing PR #12577 and removing active labels.