chakra-uiのInputにisReadOnlyがない

はじめに

• v3系

問題

• 仮でreadonlyにしたいinputタグがあるが、isReadOnlyというプロップスが当てられない

解決

• readOnlyを割り当てて解決

終わりに

• isなんとかみたいな命名は全体的になくなくす方針なのかな
• コンポーネントからコードジャンプで、node_modules内の@types/reactにこのような型定義があった。理解はできていないが検索でreadonlyを見つけて試したら動作した

    interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
        accept?: string | undefined;
        alt?: string | undefined;
        autoComplete?: HTMLInputAutoCompleteAttribute | undefined;
        capture?: boolean | "user" | "environment" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
        checked?: boolean | undefined;
        disabled?: boolean | undefined;
        form?: string | undefined;
        formAction?:
            | string
            | ((formData: FormData) => void | Promise<void>)
            | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[
                keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS
            ]
            | undefined;
        formEncType?: string | undefined;
        formMethod?: string | undefined;
        formNoValidate?: boolean | undefined;
        formTarget?: string | undefined;
        height?: number | string | undefined;
        list?: string | undefined;
        max?: number | string | undefined;
        maxLength?: number | undefined;
        min?: number | string | undefined;
        minLength?: number | undefined;
        multiple?: boolean | undefined;
        name?: string | undefined;
        pattern?: string | undefined;
        placeholder?: string | undefined;
        readOnly?: boolean | undefined;
        required?: boolean | undefined;
        size?: number | undefined;
        src?: string | undefined;
        step?: number | string | undefined;
        type?: HTMLInputTypeAttribute | undefined;
        value?: string | readonly string[] | number | undefined;
        width?: number | string | undefined;

        // No other element dispatching change events can be nested in a <input>
        // so we know the target will be a HTMLInputElement.
        onChange?: ChangeEventHandler<T, HTMLInputElement> | undefined;
    }