ChakraUIのFieldとNativeSelectを組み合わせた際のdisabled指定方法について

軽く詰まったのでメモ。 @chakra-ui/react のバージョンはv3.2.3を利用しているが、最新バージョンでも再現した。

ChakraUIのNativeSelectはdisabledというプロパティを付与することで非活性化できる。

https://www.chakra-ui.com/docs/components/native-select#disabled

公式Docより引用

import { NativeSelect } from "@chakra-ui/react"

export const NativeSelectWithDisabled = () => (
  <NativeSelect.Root disabled>
    <NativeSelect.Field placeholder="Select option">
      <option value="react">React</option>
      <option value="vue">Vue</option>
      <option value="angular">Angular</option>
      <option value="svelte">Svelte</option>
    </NativeSelect.Field>
    <NativeSelect.Indicator />
  </NativeSelect.Root>
)

ただし、Fieldと組み合わせて利用する際はNativeSelectではなくField側にdisabledを付与しないと、NativeSelectが非活性化されない。

非活性化される例

  <Field disabled>
    <NativeSelect>
      ...
    </NativeSelect>
  </Field>

非活性化されない例

  <Field>
    <NativeSelect disabled>
      ...
    </NativeSelect>
  </Field>

https://www.chakra-ui.com/docs/components/field#disabled
公式Docには Use the disabled prop to disable the field. とあるので、Doc通りの挙動と言えそう。
一方で、InputやTextareaについては直接disabledを付与しても非活性化される。謎