From 464e0b073b9457486407104db2c654b7810ea518 Mon Sep 17 00:00:00 2001
From: Chris Sandvik <chris.sandvik@gmail.com>
Date: Tue, 5 Jul 2022 13:12:56 -0400
Subject: [PATCH 1/2] Update all links for chakra v1

---
 README.md                  | 24 +++++++++---------
 src/module-augmentation.ts | 50 +++++++++++++++++++-------------------
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/README.md b/README.md
index 23ddaef..c09ca02 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # chakra-react-select v3
 
-> This version of `chakra-react-select` is for compatibility with React v17 and Chakra UI v1. It will be maintained until the majority of users have migrated to the newest version of Chakra. If you're using [Chakra UI v2](https://chakra-ui.com/guides/migration) check [the docs for chakra-react-select v4 here](https://github.com/csandman/chakra-react-select).
+> This version of `chakra-react-select` is for compatibility with React v17 and Chakra UI v1. It will be maintained until the majority of users have migrated to the newest version of Chakra. If you're using [Chakra UI v2](https://chakra-ui.com/getting-started/migration) check [the docs for chakra-react-select v4 here](https://github.com/csandman/chakra-react-select).
 
 [![Build Status](https://github.com/csandman/chakra-react-select/actions/workflows/build.yml/badge.svg?branch=main "Build Status")](https://github.com/csandman/chakra-react-select/actions/workflows/build.yml?query=branch%3Amain)
 [![Lint Status](https://github.com/csandman/chakra-react-select/actions/workflows/lint.yml/badge.svg?branch=main "Lint Status")](https://github.com/csandman/chakra-react-select/actions/workflows/lint.yml?query=branch%3Amain)
@@ -12,7 +12,7 @@
 [![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-c596c7.svg "Code Style: Prettier")](https://github.com/prettier/prettier)
 [![MIT License](https://badgen.net/github/license/csandman/chakra-react-select "MIT License")](LICENSE.md)
 
-This component is a wrapper for the popular react component [react-select](https://react-select.com/home) made using the UI library [Chakra UI](https://chakra-ui.com/).
+This component is a wrapper for the popular react component [react-select](https://react-select.com/home) made using the UI library [Chakra UI](https://v1.chakra-ui.com/).
 
 ![Chakra React Select Banner](./github/chakra-react-select.png)
 
@@ -97,7 +97,7 @@ In order to use this component, you can implement it and use it like you would n
 
 #### `size` — Options: `sm`, `md`, `lg` — Default: `md`
 
-You can pass the `size` prop with either `sm`, `md`, or `lg` (default is `md`). These will reflect the sizes available on the [Chakra `<Input />` component](https://chakra-ui.com/docs/form/input#changing-the-size-of-the-input) (with the exception of `xs` because it's too small to work).
+You can pass the `size` prop with either `sm`, `md`, or `lg` (default is `md`). These will reflect the sizes available on the [Chakra `<Input />` component](https://v1.chakra-ui.com/docs/form/input#changing-the-size-of-the-input) (with the exception of `xs` because it's too small to work).
 
 ```js
 return (
@@ -111,7 +111,7 @@ return (
 
 #### `colorScheme`
 
-You can pass the `colorScheme` prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in [the Chakra docs](https://chakra-ui.com/docs/data-display/tag#props), or if you have a custom color palette, any of the custom color names in that will be available instead.
+You can pass the `colorScheme` prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in [the Chakra docs](https://v1.chakra-ui.com/docs/data-display/tag#props), or if you have a custom color palette, any of the custom color names in that will be available instead.
 
 Alternatively you can add the `colorScheme` key to any of your options objects and it will only style that option when selected.
 
@@ -137,7 +137,7 @@ return (
 
 #### `tagVariant` — Options: `subtle`, `solid`, `outline` — Default: `subtle`
 
-You can pass the `tagVariant` prop with either `subtle`, `solid`, or `outline` (default is `subtle`). These will reflect the `variant` prop available on the [Chakra `<Tag />` component](https://chakra-ui.com/docs/data-display/tag#props).
+You can pass the `tagVariant` prop with either `subtle`, `solid`, or `outline` (default is `subtle`). These will reflect the `variant` prop available on the [Chakra `<Tag />` component](https://v1.chakra-ui.com/docs/data-display/tag#props).
 
 Alternatively you can add the `variant` key to any of your options objects and it will only style that option when selected. This will override the `tagVariant` prop on the select if both are set
 
@@ -187,7 +187,7 @@ return (
 
 #### `focusBorderColor` — Default: `blue.500` | `errorBorderColor` — Default: `red.500`
 
-The props `focusBorderColor` and `errorBorderColor` can be passed with Chakra color strings which will emulate the respective props being passed to [Chakra's `<Input />` component](https://chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors).
+The props `focusBorderColor` and `errorBorderColor` can be passed with Chakra color strings which will emulate the respective props being passed to [Chakra's `<Input />` component](https://v1.chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors).
 
 ```js
 return (
@@ -216,7 +216,7 @@ return <Select hasStickyGroupHeaders />;
 
 #### `selectedOptionStyle` — Options: `color`, `check` — Default: `color`
 
-In `v1.3.0` you can now pass the prop `selectedOptionStyle` with either `"color"` or `"check"` (defaults to `"color"`). The default option `"color"` will style a selected option similar to how react-select does it, by highlighting the selected option in the color blue. Alternatively if you pass `"check"` for the value, the selected option will be styled like the [Chakra UI Menu component](https://chakra-ui.com/docs/overlay/menu#menu-option-groups) and include a check icon next to the selected option(s). If `isMulti` and `selectedOptionStyle="check"` are passed, space will only be added for the check marks if `hideSelectedOptions={false}` is also passed.
+In `v1.3.0` you can now pass the prop `selectedOptionStyle` with either `"color"` or `"check"` (defaults to `"color"`). The default option `"color"` will style a selected option similar to how react-select does it, by highlighting the selected option in the color blue. Alternatively if you pass `"check"` for the value, the selected option will be styled like the [Chakra UI Menu component](https://v1.chakra-ui.com/docs/overlay/menu#menu-option-groups) and include a check icon next to the selected option(s). If `isMulti` and `selectedOptionStyle="check"` are passed, space will only be added for the check marks if `hideSelectedOptions={false}` is also passed.
 
 ```js
 return (
@@ -281,7 +281,7 @@ This package does however offer an alternative to the `styles` prop, `chakraStyl
 
 ### `chakraStyles`
 
-In order to use the `chakraStyles` prop, first check the documentation for [the original `styles` prop from the react-select docs](https://react-select.com/styles#style-object). This package offers an identical API for the `chakraStyles` prop, however the `provided` and output style objects use [Chakra's `sx` prop](https://chakra-ui.com/docs/features/the-sx-prop) instead of the default emotion styles the original package offers. This allows you to both use the shorthand styling props you'd normally use to style Chakra components, as well as tokens from your theme such as named colors.
+In order to use the `chakraStyles` prop, first check the documentation for [the original `styles` prop from the react-select docs](https://react-select.com/styles#style-object). This package offers an identical API for the `chakraStyles` prop, however the `provided` and output style objects use [Chakra's `sx` prop](https://v1.chakra-ui.com/docs/features/the-sx-prop) instead of the default emotion styles the original package offers. This allows you to both use the shorthand styling props you'd normally use to style Chakra components, as well as tokens from your theme such as named colors.
 
 The API for an individual style function looks like this:
 
@@ -301,7 +301,7 @@ function option(provided, state) {
 
 All of the style keys offered in the original package can be used here, except for `input` as that does not allow me to use the `chakraStyles` from the select props. The `input` styles are also much more dynamic and should be left alone for the most part.
 
-Most of the components rendered by this package use the basic [Chakra `<Box />` component](https://chakra-ui.com/docs/layout/box) with a few exceptions. Here are the style keys offered and the corresponding Chakra component that is rendered:
+Most of the components rendered by this package use the basic [Chakra `<Box />` component](https://v1.chakra-ui.com/docs/layout/box) with a few exceptions. Here are the style keys offered and the corresponding Chakra component that is rendered:
 
 - `clearIndicator` - `Box` (uses theme styles for Chakra's `CloseButton`)
 - `container` - `Box`
@@ -413,13 +413,13 @@ If anyone has any suggestions for how to fully replace the `MenuPortal` componen
 - Dropdown menu attached to control example:
   - TypeScript: https://codesandbox.io/s/chakra-react-select-chakrastyles-v3-3wus8g?file=/app.tsx
   - Vanilla JS: https://codesandbox.io/s/chakra-react-select-chakrastyles-vanilla-v3-tewves?file=/example.js
-- Default [Chakra `<Select />`](https://chakra-ui.com/docs/form/select) styles example:
+- Default [Chakra `<Select />`](https://v1.chakra-ui.com/docs/form/select) styles example:
   - TypeScript: https://codesandbox.io/s/chakra-react-select-styled-like-a-default-chakra-select-v3-7273qk?file=/app.tsx
   - Vanilla JS: https://codesandbox.io/s/chakra-react-select-styled-like-a-default-chakra-select-vanilla-v3-edv95f?file=/example.js
 
 ### Theme Styles
 
-As mentioned above, a few of the custom components this package implements either use styles from the global [Chakra component theme](https://chakra-ui.com/docs/theming/customize-theme#customizing-component-styles) or are themselves those components. As this package pulls directly from your Chakra theme, any changes you make to those components' themes will propagate to the components in this package. Here is a list of all components that will be affected by changes to your global styles:
+As mentioned above, a few of the custom components this package implements either use styles from the global [Chakra component theme](https://v1.chakra-ui.com/docs/theming/customize-theme#customizing-component-styles) or are themselves those components. As this package pulls directly from your Chakra theme, any changes you make to those components' themes will propagate to the components in this package. Here is a list of all components that will be affected by changes to your global styles:
 
 | `react-select` component | `chakra-ui` component styles                                                                                    |
 | ------------------------ | --------------------------------------------------------------------------------------------------------------- |
@@ -616,7 +616,7 @@ CodeSandbox Examples:
 
 ### Custom `LoadingIndicator` (Chakra `Spinner`)
 
-For most sub components, the styling can be easily accomplished using the [`chakraStyles`](#chakrastyles) prop. However, in the case of the `LoadingIndicator` there are a few props which do not directly correlate very well with styling props. To solve that problem, the `chakraComponents.LoadingIndicator` component can be passed a few extra props which are normally available on the Chakra UI [`Spinner`](https://chakra-ui.com/docs/components/feedback/spinner). Here is an example demonstrating which extra props are offered:
+For most sub components, the styling can be easily accomplished using the [`chakraStyles`](#chakrastyles) prop. However, in the case of the `LoadingIndicator` there are a few props which do not directly correlate very well with styling props. To solve that problem, the `chakraComponents.LoadingIndicator` component can be passed a few extra props which are normally available on the Chakra UI [`Spinner`](https://v1.chakra-ui.com/docs/components/feedback/spinner). Here is an example demonstrating which extra props are offered:
 
 ```jsx
 import { AsyncSelect, chakraComponents } from "chakra-react-select";
diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts
index f45f189..48057b2 100644
--- a/src/module-augmentation.ts
+++ b/src/module-augmentation.ts
@@ -28,8 +28,8 @@ declare module "react-select/dist/declarations/src/Select" {
      * Options: `sm` | `md` | `lg`
      *
      * @defaultValue `md`
-     * @see {@link https://github.com/csandman/chakra-react-select#size--options-sm-md-lg--default-md}
-     * @see {@link https://chakra-ui.com/docs/form/input#changing-the-size-of-the-input}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#size--options-sm-md-lg--default-md}
+     * @see {@link https://v1.chakra-ui.com/docs/form/input#changing-the-size-of-the-input}
      */
     size?: Size;
 
@@ -40,16 +40,16 @@ 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://chakra-ui.com/docs/form/input#props}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#isinvalid--default-false}
+     * @see {@link https://v1.chakra-ui.com/docs/form/input#props}
      */
     isInvalid?: boolean;
 
     /**
      * If `true`, the form control will be `readonly`
      *
-     * @see {@link https://chakra-ui.com/docs/components/form/input#props}
-     * @see {@link https://chakra-ui.com/docs/components/form/form-control#props}
+     * @see {@link https://v1.chakra-ui.com/docs/components/form/input#props}
+     * @see {@link https://v1.chakra-ui.com/docs/components/form/form-control#props}
      */
     isReadOnly?: boolean;
 
@@ -58,8 +58,8 @@ declare module "react-select/dist/declarations/src/Select" {
      * - The `FormLabel` will show a required indicator
      * - The form element (e.g, Input) will have `aria-required` set to true
      *
-     * @see {@link https://chakra-ui.com/docs/components/form/input#props}
-     * @see {@link https://chakra-ui.com/docs/components/form/form-control#props}
+     * @see {@link https://v1.chakra-ui.com/docs/components/form/input#props}
+     * @see {@link https://v1.chakra-ui.com/docs/components/form/form-control#props}
      */
     isRequired?: boolean;
 
@@ -70,8 +70,8 @@ declare module "react-select/dist/declarations/src/Select" {
      * The styling matches the chakra `Tag` component
      *
      * @defaultValue `"gray"`
-     * @see {@link https://github.com/csandman/chakra-react-select#colorscheme}
-     * @see {@link https://chakra-ui.com/docs/data-display/tag#props}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#colorscheme}
+     * @see {@link https://v1.chakra-ui.com/docs/data-display/tag#props}
      */
     colorScheme?: string;
 
@@ -82,8 +82,8 @@ declare module "react-select/dist/declarations/src/Select" {
      * Options: "subtle" | "solid" | "outline"
      *
      * @defaultValue `subtle`
-     * @see {@link https://github.com/csandman/chakra-react-select#tagvariant--options-subtle-solid-outline--default-subtle}
-     * @see {@link https://chakra-ui.com/docs/data-display/tag#props}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#tagvariant--options-subtle-solid-outline--default-subtle}
+     * @see {@link https://v1.chakra-ui.com/docs/data-display/tag#props}
      */
     tagVariant?: TagVariant;
 
@@ -93,7 +93,7 @@ declare module "react-select/dist/declarations/src/Select" {
      * corresponding group is in view
      *
      * @defaultValue `false`
-     * @see {@link https://github.com/csandman/chakra-react-select#hasstickygroupheaders--default-false}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#hasstickygroupheaders--default-false}
      */
     hasStickyGroupHeaders?: boolean;
 
@@ -104,8 +104,8 @@ declare module "react-select/dist/declarations/src/Select" {
      * Options: `color` | `check`
      *
      * @defaultValue `color`
-     * @see {@link https://github.com/csandman/chakra-react-select#selectedoptionstyle--options-color-check--default-color}
-     * @see {@link https://chakra-ui.com/docs/overlay/menu#menu-option-groups}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#selectedoptionstyle--options-color-check--default-color}
+     * @see {@link https://v1.chakra-ui.com/docs/overlay/menu#menu-option-groups}
      */
     selectedOptionStyle?: SelectedOptionStyle;
 
@@ -115,7 +115,7 @@ declare module "react-select/dist/declarations/src/Select" {
      * and the `300` value in dark mode.
      *
      * @defaultValue `blue`
-     * @see {@link https://github.com/csandman/chakra-react-select#selectedoptioncolor--default-blue}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#selectedoptioncolor--default-blue}
      */
     selectedOptionColor?: string;
 
@@ -124,8 +124,8 @@ declare module "react-select/dist/declarations/src/Select" {
      * select is focused
      *
      * @defaultValue Light mode: `blue.500` | Dark mode: `blue.300`
-     * @see {@link https://github.com/csandman/chakra-react-select#focusbordercolor--default-blue500--errorbordercolor--default-red500}
-     * @see {@link https://chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#focusbordercolor--default-blue500--errorbordercolor--default-red500}
+     * @see {@link https://v1.chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors}
      */
     focusBorderColor?: string;
 
@@ -134,8 +134,8 @@ declare module "react-select/dist/declarations/src/Select" {
      * `isInvalid` is passed to the select
      *
      * @defaultValue Light mode: `red.500` | Dark mode: `red.300`
-     * @see {@link https://github.com/csandman/chakra-react-select#focusbordercolor--default-blue500--errorbordercolor--default-red500}
-     * @see {@link https://chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#focusbordercolor--default-blue500--errorbordercolor--default-red500}
+     * @see {@link https://v1.chakra-ui.com/docs/form/input#changing-the-focus-and-error-border-colors}
      */
     errorBorderColor?: string;
 
@@ -152,7 +152,7 @@ declare module "react-select/dist/declarations/src/Select" {
      * Style transformation methods for each of the rendered components using,
      * Chakra's `SystemStyleObject` and the props passed into each component
      *
-     * @see {@link https://github.com/csandman/chakra-react-select#chakrastyles}
+     * @see {@link https://github.com/csandman/chakra-react-select/tree/v3#chakrastyles}
      * @see {@link https://react-select.com/styles#style-object}
      */
     chakraStyles?: ChakraStylesConfig<Option, IsMulti, Group>;
@@ -205,7 +205,7 @@ declare module "react-select/dist/declarations/src/components/indicators" {
      * The color of the empty area in the spinner
      *
      * @defaultValue `transparent`
-     * @see {@link https://chakra-ui.com/docs/components/feedback/spinner#spinner-with-empty-area-color}
+     * @see {@link https://v1.chakra-ui.com/docs/components/feedback/spinner#spinner-with-empty-area-color}
      */
     emptyColor?: string;
 
@@ -214,7 +214,7 @@ declare module "react-select/dist/declarations/src/components/indicators" {
      *
      * Defaults to one size smaller than the overall Select's size
      *
-     * @see {@link https://chakra-ui.com/docs/components/feedback/spinner#spinner-with-different-size}
+     * @see {@link https://v1.chakra-ui.com/docs/components/feedback/spinner#spinner-with-different-size}
      */
     spinnerSize?: "xs" | "sm" | "md" | "lg" | "xl";
 
@@ -228,7 +228,7 @@ declare module "react-select/dist/declarations/src/components/indicators" {
      * ```jsx
      * <Spinner speed="0.2s"/>
      * ```
-     * @see {@link https://chakra-ui.com/docs/components/feedback/spinner#props}
+     * @see {@link https://v1.chakra-ui.com/docs/components/feedback/spinner#props}
      */
     speed?: string;
 
@@ -240,7 +240,7 @@ declare module "react-select/dist/declarations/src/components/indicators" {
      * ```jsx
      * <Spinner thickness="4px"/>
      * ```
-     * @see {@link https://chakra-ui.com/docs/components/feedback/spinner#props}
+     * @see {@link https://v1.chakra-ui.com/docs/components/feedback/spinner#props}
      */
     thickness?: string;
   }

From 873cc10c7fccec5373a6f2f503c22f33335bbdbb Mon Sep 17 00:00:00 2001
From: Chris Sandvik <chris.sandvik@gmail.com>
Date: Tue, 5 Jul 2022 13:24:50 -0400
Subject: [PATCH 2/2] Add missing `innerProps`

---
 src/chakra-components/containers.tsx  | 4 +++-
 src/chakra-components/group.tsx       | 3 ++-
 src/chakra-components/indicators.tsx  | 4 ++--
 src/chakra-components/menu.tsx        | 8 +++++---
 src/chakra-components/option.tsx      | 2 +-
 src/chakra-components/placeholder.tsx | 2 +-
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/chakra-components/containers.tsx b/src/chakra-components/containers.tsx
index 66d4b55..025af24 100644
--- a/src/chakra-components/containers.tsx
+++ b/src/chakra-components/containers.tsx
@@ -43,6 +43,7 @@ export const SelectContainer = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           "--is-disabled": isDisabled,
@@ -52,7 +53,6 @@ export const SelectContainer = <
         className
       )}
       sx={sx}
-      {...innerProps}
     >
       {children}
     </Box>
@@ -72,6 +72,7 @@ export const ValueContainer = <
     cx,
     isMulti,
     hasValue,
+    innerProps,
     selectProps: { size, chakraStyles },
   } = props;
 
@@ -98,6 +99,7 @@ export const ValueContainer = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           "value-container": true,
diff --git a/src/chakra-components/group.tsx b/src/chakra-components/group.tsx
index 5e68143..8522d67 100644
--- a/src/chakra-components/group.tsx
+++ b/src/chakra-components/group.tsx
@@ -23,6 +23,7 @@ const Group = <
     headingProps,
     label,
     selectProps,
+    innerProps,
   } = props;
 
   const { chakraStyles } = selectProps;
@@ -32,7 +33,7 @@ const Group = <
     : {};
 
   return (
-    <Box className={cx({ group: true }, className)} sx={sx}>
+    <Box {...innerProps} className={cx({ group: true }, className)} sx={sx}>
       <Heading
         {...headingProps}
         selectProps={selectProps}
diff --git a/src/chakra-components/indicators.tsx b/src/chakra-components/indicators.tsx
index 7b591ee..68c72aa 100644
--- a/src/chakra-components/indicators.tsx
+++ b/src/chakra-components/indicators.tsx
@@ -178,6 +178,7 @@ export const ClearIndicator = <
 
   return (
     <Box
+      {...innerProps}
       role="button"
       className={cx(
         {
@@ -189,7 +190,6 @@ export const ClearIndicator = <
       sx={sx}
       data-focused={isFocused ? true : undefined}
       aria-label="Clear selected options"
-      {...innerProps}
     >
       {children || <CrossIcon sx={iconSx} />}
     </Box>
@@ -231,6 +231,7 @@ export const LoadingIndicator = <
 
   return (
     <Spinner
+      {...innerProps}
       className={cx(
         {
           indicator: true,
@@ -239,7 +240,6 @@ export const LoadingIndicator = <
         className
       )}
       sx={sx}
-      {...innerProps}
       size={propsSpinnerSize || spinnerSize}
       color={color}
       emptyColor={emptyColor}
diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index afedd20..b9fee76 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -47,10 +47,10 @@ const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
 
   return (
     <Box
+      {...innerProps}
       ref={innerRef}
       className={cx({ menu: true }, className)}
       sx={sx}
-      {...innerProps}
     >
       <StylesProvider value={menuStyles}>{children}</StylesProvider>
     </Box>
@@ -71,6 +71,7 @@ const MenuList = <
     children,
     maxHeight,
     isMulti,
+    innerProps,
     selectProps: { size, chakraStyles },
   } = props;
 
@@ -91,6 +92,7 @@ const MenuList = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           "menu-list": true,
@@ -146,6 +148,7 @@ const LoadingMessage = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           "menu-notice": true,
@@ -154,7 +157,6 @@ const LoadingMessage = <
         className
       )}
       sx={sx}
-      {...innerProps}
     >
       {children}
     </Box>
@@ -201,6 +203,7 @@ const NoOptionsMessage = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           "menu-notice": true,
@@ -209,7 +212,6 @@ const NoOptionsMessage = <
         className
       )}
       sx={sx}
-      {...innerProps}
     >
       {children}
     </Box>
diff --git a/src/chakra-components/option.tsx b/src/chakra-components/option.tsx
index a692114..536bd46 100644
--- a/src/chakra-components/option.tsx
+++ b/src/chakra-components/option.tsx
@@ -99,6 +99,7 @@ const Option = <
 
   return (
     <Box
+      {...innerProps}
       role="button"
       className={cx(
         {
@@ -111,7 +112,6 @@ const Option = <
       )}
       sx={sx}
       ref={innerRef}
-      {...innerProps}
       data-disabled={isDisabled ? true : undefined}
       aria-disabled={isDisabled ? true : undefined}
     >
diff --git a/src/chakra-components/placeholder.tsx b/src/chakra-components/placeholder.tsx
index e1ce64e..9264787 100644
--- a/src/chakra-components/placeholder.tsx
+++ b/src/chakra-components/placeholder.tsx
@@ -34,6 +34,7 @@ const Placeholder = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           placeholder: true,
@@ -41,7 +42,6 @@ const Placeholder = <
         className
       )}
       sx={sx}
-      {...innerProps}
     >
       {children}
     </Box>