feat(ui5-select): Add support for disabled select options

[kineticjs]

Allow the application specify select options as disabled. Disabled options are non-interactable.

Fixes: #2559

[ilhan007]

I noticed one issue after testing a bit. If you have a list item with both selected and disabled initially and you press TAB to move the focus from the button (in this case) to the List, the focus is somehow lost, the arrows can't be used to move the focus between the items, and the disabled item gets the default browser outline

        <ui5-button>click</ui5-button>
	<ui5-list>
		<ui5-li>a</ui5-li>
		<ui5-li disabled selected >b</ui5-li>
		<ui5-li>c</ui5-li>
		<ui5-li>d</ui5-li>
	</ui5-list>

[kineticjs]

Yes, the logic for focusing the items had to take disabled items into account. I made an update. Any improvement suggestions on top if it are welcome..

Btw earlier I noticed another issue with disabled list-items (when the list is not used within a select) but couldn't find a proper solution to it (using the means of the framework) so didn't address it so far (btw I also wasn't sure if we need to handle that case):

        <ui5-list>
		<ui5-li>a</ui5-li>
		<ui5-li>b</ui5-li>
	</ui5-list>

=> After the list is rendered, its first item has tabindex 0.
Now, if we set "disabled" to "true" for the first item (from the console)
=> I see the first item is invalidated and correctly rerendered with tabindex -1,
but the second item still remains with tabindex -1
=> all list items now have tabindex -1

I see that the issue does not occur when the list is in a select and we disable select-options (rather than directly list-tems),
because the select causes the list to be invalidated as well.

Should we try to invalidate the list in the above case too? .. or is it outside our scope? Any suggestions/improvements you consider related are welcome!

[ilhan007]

Yes, the logic for focusing the items had to take disabled items into account. I made an update. Any improvement suggestions on top if it are welcome..

Btw earlier I noticed another issue with disabled list-items (when the list is not used within a select) but couldn't find a proper solution to it (using the means of the framework) so didn't address it so far (btw I also wasn't sure if we need to handle that case):

        <ui5-list>
		<ui5-li>a</ui5-li>
		<ui5-li>b</ui5-li>
	</ui5-list>

=> After the list is rendered, its first item has tabindex 0.
Now, if we set "disabled" to "true" for the first item (from the console)
=> I see the first item is invalidated and correctly rerendered with tabindex -1,
but the second item still remains with tabindex -1
=> all list items now have tabindex -1

I see that the issue does not occur when the list is in a select and we disable select-options (rather than directly list-tems),
because the select causes the list to be invalidated as well.

Should we try to invalidate the list in the above case too? .. or is it outside our scope? Any suggestions/improvements you consider related are welcome!

I will write this List problem down and if in future we decide to make the "disabled" public for the ListItem we will have to tackle it. For now, it is fine. Thanks for the feature.

[kineticjs]

Thanks!