feat: add readonly combo box (#12445)

* feat: add readonly combo box * fix: cursor following review Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Dec 6, 2022 · 69ca3d6 · 69ca3d6
1 parent a2f32cf
commit 69ca3d6
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 2 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1179,6 +1179,9 @@ Map {
       "placeholder": Object {
         "type": "string",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "selectedItem": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -164,6 +164,26 @@ describe('ComboBox', () => {
     });
   });
 
+  describe('when readonly', () => {
+    it('should not let the user edit the input node', () => {
+      render(<ComboBox {...mockProps} readOnly={true} />);
+
+      expect(findInputNode()).toHaveAttribute('readonly');
+
+      expect(findInputNode()).toHaveDisplayValue('');
+
+      userEvent.type(findInputNode(), 'o');
+
+      expect(findInputNode()).toHaveDisplayValue('');
+    });
+
+    it('should not let the user expand the menu', () => {
+      render(<ComboBox {...mockProps} disabled={true} />);
+      openMenu();
+      expect(findListBoxNode()).not.toHaveClass('cds--list-box--expanded');
+    });
+  });
+
   describe('downshift quirks', () => {
     it('should set `inputValue` to an empty string if a false-y value is given', () => {
       render(<ComboBox {...mockProps} />);

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -91,6 +91,7 @@ const ComboBox = React.forwardRef((props, ref) => {
     onInputChange,
     onToggleClick, // eslint-disable-line no-unused-vars
     placeholder,
+    readOnly,
     selectedItem,
     shouldFilterItem,
     size,
@@ -203,6 +204,7 @@ const ComboBox = React.forwardRef((props, ref) => {
     {
       [`${prefix}--list-box--up`]: direction === 'top',
       [`${prefix}--combo-box--warning`]: showWarning,
+      [`${prefix}--combo-box--readonly`]: readOnly,
     }
   );
   const titleClasses = cx(`${prefix}--label`, {
@@ -264,7 +266,7 @@ const ComboBox = React.forwardRef((props, ref) => {
         );
         const labelProps = getLabelProps();
         const buttonProps = getToggleButtonProps({
-          disabled,
+          disabled: disabled || readOnly,
           onClick: handleToggleClick(isOpen),
           // When we moved the "root node" of Downshift to the <input> for
           // ARIA 1.2 compliance, we unfortunately hit this branch for the
@@ -308,6 +310,17 @@ const ComboBox = React.forwardRef((props, ref) => {
           }
         };
 
+        const readOnlyEventHandlers = readOnly
+          ? {
+              onKeyDown: (evt) => {
+                // This prevents the select from opening for the above keys
+                if (evt.key !== 'Tab') {
+                  evt.preventDefault();
+                }
+              },
+            }
+          : {};
+
         return (
           <div className={wrapperClasses}>
             {titleText && (
@@ -341,6 +354,8 @@ const ComboBox = React.forwardRef((props, ref) => {
                   title={textInput?.current?.value}
                   {...inputProps}
                   {...rest}
+                  {...readOnlyEventHandlers}
+                  readOnly={readOnly}
                   ref={mergeRefs(textInput, ref)}
                 />
                 {invalid && (
@@ -357,7 +372,7 @@ const ComboBox = React.forwardRef((props, ref) => {
                   <ListBoxSelection
                     clearSelection={clearSelection}
                     translateWithId={translateWithId}
-                    disabled={disabled}
+                    disabled={disabled || readOnly}
                     onClearSelection={handleSelectionClear}
                   />
                 )}
@@ -540,6 +555,11 @@ ComboBox.propTypes = {
    */
   placeholder: PropTypes.string,
 
+  /**
+   * Is the ComboBox readonly?
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * For full control of the selection
    */

diff --git a/packages/react/src/components/ListBox/next/ListBoxSelection.js b/packages/react/src/components/ListBox/next/ListBoxSelection.js
@@ -92,6 +92,7 @@ function ListBoxSelection({
       {...rest}
       aria-label={description}
       className={className}
+      disabled={disabled}
       onClick={onClick}
       onKeyDown={onKeyDown}
       tabIndex={disabled ? -1 : 0}

diff --git a/packages/styles/scss/components/combo-box/_combo-box.scss b/packages/styles/scss/components/combo-box/_combo-box.scss
@@ -42,4 +42,20 @@
     .#{$prefix}--list-box__field {
     padding: 0;
   }
+
+  // readonly
+  .#{$prefix}--combo-box--readonly,
+  .#{$prefix}--combo-box--readonly:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon,
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection {
+    cursor: default;
+  }
+
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon svg,
+  .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection svg {
+    fill: $icon-disabled;
+  }
 }