isReadOnly doesn't work

[krystxf]

Description

When property isReadOnly={true} select is still editable

chakra-react-select Version

4.1.5

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. set isReadOnly={true}
2. try to edit the select

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

I fixed this issue by wrapping component in div with style pointerEvents: "none"

[csandman]

This was never a fully implemented feature, as I wasn't sure of its usefulness relative to disabled. Hence why it's not in the docs. Is this something you have some use for? If so, I'm curious about the use case, and I could put some effort into fixing it.

[krystxf]

I use this in a CRUD system where the form can be readOnly if the user does not have update permission. But on the other hand, this is one of the less used features, since even chakra-ui select doesn't have this feature.

[csandman]

Ok if you have a use case for it, I can put some time into making that work right. I'm not entirely sure about how accessibility friendly the feature will be though.

[csandman]

Ok I pushed a new version which makes this prop functional in #173, and it maintains the same styling as Chakra's Input does when passed.

• New Docs: https://github.com/csandman/chakra-react-select#isinvalid--default-false--isreadonly---default-false
• Version: https://github.com/csandman/chakra-react-select/releases/tag/v4.2.1
• Demo: https://codesandbox.io/s/chakra-react-select-invalid-disabled-0hyl8l?file=/example.js

[csandman]

If you're still having trouble with it feel free to reopen!