From fabe709e6961da2fe7dcf2b743fa238661e2f70c Mon Sep 17 00:00:00 2001 From: Blake Vandercar Date: Mon, 27 Feb 2023 22:27:59 -0700 Subject: [PATCH 1/3] disabled prop on select and multiselect combobox element --- packages/select/src/components/multi-select/multiSelect2.tsx | 1 + packages/select/src/components/select/select2.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/select/src/components/multi-select/multiSelect2.tsx b/packages/select/src/components/multi-select/multiSelect2.tsx index d97dc8ab4f..079b44177c 100644 --- a/packages/select/src/components/multi-select/multiSelect2.tsx +++ b/packages/select/src/components/multi-select/multiSelect2.tsx @@ -293,6 +293,7 @@ export class MultiSelect2 extends AbstractPureComponent2 className: classNames(targetProps.className, popoverTargetProps.className, { [CoreClasses.FILL]: fill, }), + disabled, // Normally, Popover2 would also need to attach its own `onKeyDown` handler via `targetProps`, // but in our case we fully manage that interaction and listen for key events to open/close // the popover, so we elide it from the DOM. diff --git a/packages/select/src/components/select/select2.tsx b/packages/select/src/components/select/select2.tsx index d461483702..3c58a26396 100644 --- a/packages/select/src/components/select/select2.tsx +++ b/packages/select/src/components/select/select2.tsx @@ -214,7 +214,7 @@ export class Select2 extends AbstractPureComponent2, Select2S // since it may be stale (`renderTarget` is not re-invoked on this.state changes). // eslint-disable-next-line react/display-name ({ isOpen: _isOpen, ref, ...targetProps }: Popover2TargetProps & Popover2ClickTargetHandlers) => { - const { popoverProps = {}, popoverTargetProps } = this.props; + const { disabled, popoverProps = {}, popoverTargetProps } = this.props; const { handleKeyDown, handleKeyUp } = listProps; const { targetTagName = "div" } = popoverProps; return React.createElement( @@ -228,6 +228,7 @@ export class Select2 extends AbstractPureComponent2, Select2S className: classNames(targetProps.className, popoverTargetProps?.className, { [CoreClasses.FILL]: this.props.fill, }), + disabled, // Normally, Popover2 would also need to attach its own `onKeyDown` handler via `targetProps`, // but in our case we fully manage that interaction and listen for key events to open/close // the popover, so we elide it from the DOM. From bdace955c563be8f3bca0f722b5530e336bf0b4c Mon Sep 17 00:00:00 2001 From: Blake Vandercar Date: Tue, 28 Feb 2023 09:10:54 -0700 Subject: [PATCH 2/3] fix: prop --- packages/select/src/components/multi-select/multiSelect2.tsx | 2 +- packages/select/src/components/select/select2.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/select/src/components/multi-select/multiSelect2.tsx b/packages/select/src/components/multi-select/multiSelect2.tsx index 079b44177c..2a4809190e 100644 --- a/packages/select/src/components/multi-select/multiSelect2.tsx +++ b/packages/select/src/components/multi-select/multiSelect2.tsx @@ -289,11 +289,11 @@ export class MultiSelect2 extends AbstractPureComponent2 ...popoverTargetProps, ...targetProps, "aria-expanded": isOpen, + "aria-disabled": disabled, // Note that we must set FILL here in addition to TagInput to get the wrapper element to full width className: classNames(targetProps.className, popoverTargetProps.className, { [CoreClasses.FILL]: fill, }), - disabled, // Normally, Popover2 would also need to attach its own `onKeyDown` handler via `targetProps`, // but in our case we fully manage that interaction and listen for key events to open/close // the popover, so we elide it from the DOM. diff --git a/packages/select/src/components/select/select2.tsx b/packages/select/src/components/select/select2.tsx index 3c58a26396..09d1fbdc2a 100644 --- a/packages/select/src/components/select/select2.tsx +++ b/packages/select/src/components/select/select2.tsx @@ -223,12 +223,12 @@ export class Select2 extends AbstractPureComponent2, Select2S "aria-controls": this.listboxId, ...popoverTargetProps, ...targetProps, + "aria-disabled": disabled, "aria-expanded": isOpen, // Note that we must set FILL here in addition to children to get the wrapper element to full width className: classNames(targetProps.className, popoverTargetProps?.className, { [CoreClasses.FILL]: this.props.fill, }), - disabled, // Normally, Popover2 would also need to attach its own `onKeyDown` handler via `targetProps`, // but in our case we fully manage that interaction and listen for key events to open/close // the popover, so we elide it from the DOM. From 3e822d9c1e9bff2943b39eea948917048f3c7b9e Mon Sep 17 00:00:00 2001 From: Blake Vandercar Date: Tue, 28 Feb 2023 10:49:31 -0700 Subject: [PATCH 3/3] style: fix --- packages/select/src/components/multi-select/multiSelect2.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/select/src/components/multi-select/multiSelect2.tsx b/packages/select/src/components/multi-select/multiSelect2.tsx index 2a4809190e..03578a3148 100644 --- a/packages/select/src/components/multi-select/multiSelect2.tsx +++ b/packages/select/src/components/multi-select/multiSelect2.tsx @@ -288,8 +288,8 @@ export class MultiSelect2 extends AbstractPureComponent2 "aria-controls": this.listboxId, ...popoverTargetProps, ...targetProps, - "aria-expanded": isOpen, "aria-disabled": disabled, + "aria-expanded": isOpen, // Note that we must set FILL here in addition to TagInput to get the wrapper element to full width className: classNames(targetProps.className, popoverTargetProps.className, { [CoreClasses.FILL]: fill,