fix(select): disable interaction with the open list

CHANGELOG.md

@@ -329,6 +329,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
     - The thumb label is in the top layer, so a container that clips its overflow does not cut it. It also shows on keyboard focus, and Escape hides it.
   - The box of the slider holds the ticks and their labels, so a slider with tick labels is taller. You can remove the space that you added for the labels. A tick label stays on one line. [#2445](https://github.com/IgniteUI/igniteui-webcomponents/pull/2445)
 - #### Select
+  - An open list no longer accepts a selection when the Select becomes disabled. [#2601](https://github.com/IgniteUI/igniteui-webcomponents/issues/2601)
   - In forced colors mode, the list has a border. [#2488](https://github.com/IgniteUI/igniteui-webcomponents/pull/2488)
 - #### Snackbar, Toast
   - `container` positioning no longer moves the component to the start of the container in the tab order. [#2447](https://github.com/IgniteUI/igniteui-webcomponents/pull/2447)

src/components/select/select.spec.ts

@@ -30,6 +30,7 @@ import {
 } from '#internals/testing/form-testbed.spec.js';
 import {
   axeReflectedRelationsOptions,
+  clickWithMouse,
   isFocused,
   withDocumentSheets,
 } from '#internals/testing/helpers.spec.js';
@@ -587,6 +588,18 @@ describe('Select', () => {
       await elementUpdated(select);
     });
 
+    it('rejects a pointer selection after an open select becomes disabled', async () => {
+      const eventSpy = spy(select, 'emitEvent');
+      await openSelect();
+
+      select.disabled = true;
+      await elementUpdated(select);
+      await clickWithMouse(select.items[0]);
+
+      expect(select.value).to.equal('implementation');
+      expect(eventSpy).not.calledWith('igcChange');
+    });
+
     it('closes the list when the current selection is clicked again', async () => {
       await openSelect();
 

src/components/select/select.ts

@@ -701,7 +701,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
 
   protected _renderDropdown() {
     return html`
-      <div part="base" .inert=${!this.open}>
+      <div part="base" .inert=${!this.open || this.disabled}>
         <slot name="header"></slot>
         <div
           id="dropdown"

src/components/select/spec.md

@@ -133,7 +133,8 @@ As a developer, I expect to be able to:
 The anchor renders like an input: a label, the display value or the placeholder, optional prefix and suffix content
 and a toggle icon that reflects the open state. Activating it opens the list of options, positioned against the
 anchor. The selected option is marked and the active option carries its own state. Selecting commits the value and
-closes the list unless `keepOpenOnSelect` is set.
+closes the list unless `keepOpenOnSelect` is set. If the select becomes disabled while its list is open, the
+list cannot receive focus or accept a selection.
 
 ### Developer experience
 
@@ -455,7 +456,8 @@ helpers from [`src/internals/testing`](../../internals/testing). The groups belo
    `value` again keeps the active item, while a user commit and `select()` with the selected item move it there. A
    removed active item hands the navigation back to the selected item. Setting `selected` on each item again keeps
    the active item and its tab stop.
-8. Selecting a disabled item is not possible.
+8. Selecting a disabled item is not possible. A pointer click cannot change the selection after the open
+   control becomes disabled.
 
 ### Asynchronously rendered items