Merge pull request #173 from csandman/read-only

Make the `isReadOnly` prop functional

Author: csandman

README.md

@@ -35,7 +35,7 @@ Check out these demos:
   - [`size`](#size--options-sm--md--lg--default-md)
   - [`colorScheme`](#colorscheme)
   - [`tagVariant`](#tagvariant--options-subtle--solid--outline--default-subtle)
-  - [`isInvalid`](#isinvalid--default-false)
+  - [`isInvalid` / `isReadOnly`](#isinvalid--default-false--isreadonly---default-false)
   - [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500)
   - [`useBasicStyles`](#usebasicstyles--default-false)
   - [`selectedOptionStyle`](#selectedoptionstyle--options-color--check--default-color)
@@ -174,19 +174,23 @@ return (
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-tag-variants-w31gnt?file=/example.js)
 
-#### `isInvalid` — Default: `false`
+#### `isInvalid` — Default: `false` | `isReadOnly` - Default: `false`
 
-You can pass `isInvalid` to the select component to style it like the Chakra `<Input />` is styled when it receives the same prop.
+You can pass `isInvalid` to the select component to style it like the Chakra `Input` is styled when it receives the same prop. Alternatively you can pass `isReadOnly` to make the component non-interactive in the same way Chakra's `Input` does.
 
-You can pass also pass `isInvalid` or `isDisabled` to a wrapping `<FormControl />` and it will output their corresponding `<Input />` on the select.
+You can pass also pass `isInvalid`, `isDisabled`, or `isReadOnly` into a wrapping `<FormControl />` to achieve the same result as passing these props into the `Select` component.
 
 ```js
 return (
   <>
     {/* This will show up with a red border */}
     <Select isInvalid />
 
-    {/* This will show up with a red border, and grayed out */}
+    {/* This will show up normally but will not be interactive */}
+    <Select isReadOnly />
+
+    {/* This will show up grayed out and will not be interactive */}
+    {/* Additionally, it will have a red border and the error message will be shown */}
     <FormControl isInvalid isDisabled>
       <FormLabel>Invalid & Disabled Select</FormLabel>
       <Select />

src/chakra-components/control.tsx

@@ -34,6 +34,7 @@ const Control = <
     selectProps: {
       size,
       isInvalid,
+      isReadOnly,
       chakraStyles,
       focusBorderColor,
       errorBorderColor,
@@ -86,6 +87,7 @@ const Control = <
       data-focus-visible={isFocused ? true : undefined}
       data-invalid={isInvalid ? true : undefined}
       data-disabled={isDisabled ? true : undefined}
+      aria-readonly={isReadOnly ? true : undefined}
     >
       {children}
     </Box>
@@ -179,7 +181,6 @@ export const DropdownIndicator = <
     height: "100%",
     borderRadius: 0,
     borderWidth: 0,
-    cursor: "pointer",
     fontSize: iconSize,
     ...(useBasicStyles && {
       background: "transparent",

src/chakra-components/input.tsx

@@ -73,7 +73,7 @@ const Input = <
         ref={innerRef}
         sx={inputSx}
         disabled={isDisabled}
-        readOnly={isReadOnly}
+        readOnly={isReadOnly ? true : undefined}
         aria-readonly={isReadOnly ? true : undefined}
         aria-required={isRequired ? true : undefined}
         {...innerProps}

src/module-augmentation.ts

@@ -41,14 +41,17 @@ declare module "react-select/dist/declarations/src/Select" {
      * If the `aria-invalid` prop is not passed, this prop will also set that
      *
      * @defaultValue `false`
-     * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false}
+     * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false--isreadonly---default-false}
      * @see {@link https://chakra-ui.com/docs/components/input/props}
+     * @see {@link https://chakra-ui.com/docs/components/form-control/props}
      */
     isInvalid?: boolean;
 
     /**
      * If `true`, the form control will be `readonly`
      *
+     * @defaultValue `false`
+     * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false--isreadonly---default-false}
      * @see {@link https://chakra-ui.com/docs/components/input/props}
      * @see {@link https://chakra-ui.com/docs/components/form-control/props}
      */

src/use-chakra-select-props.ts

@@ -27,6 +27,7 @@ const useChakraSelectProps = <
   chakraStyles = {},
   onFocus,
   onBlur,
+  menuIsOpen,
   ...props
 }: Props<Option, IsMulti, Group>): Props<Option, IsMulti, Group> => {
   /**
@@ -44,6 +45,9 @@ const useChakraSelectProps = <
     onBlur,
   });
 
+  // Unless `menuIsOpen` is controlled, disable it if the select is readonly
+  const realMenuIsOpen = menuIsOpen ?? inputProps.readOnly ? false : undefined;
+
   /** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */
   let realSize: Size = size;
   const sizeOptions: Size[] = ["sm", "md", "lg"];
@@ -110,6 +114,8 @@ const useChakraSelectProps = <
     isDisabled: inputProps.disabled,
     isInvalid: !!inputProps["aria-invalid"],
     inputId: inputProps.id,
+    isReadOnly: inputProps.readOnly,
+    menuIsOpen: realMenuIsOpen,
     ...props,
     // aria-invalid can be passed to react-select, so we allow that to
     // override the `isInvalid` prop