Combobox readonly

[FelixBlaisThon]

Unless I am not implementing/using the component properly, there is a readOnly (optional) prop for the combobox that determines if a value can be changed, but it does not seem to be implemented. If I add readOnly in the snippet below, the readOnly prop does not prevent a click on the target to open the dropdown (it should prevent click event on its child component or something).

<Combobox {...somProps} readOnly>
  <Combobox.Target>
     <InputBase {...someProps} onClick={() => combobox.openDropdown()} />
   </Combobox.Target>
</Combobox>

Was that known ? I don't see any style associated with a readOnly combobox either in its module.css
I don't mind looking into a PR to create so that we can have a functional readOnly

[rtivital]

readOnly prop is combobox used for target element props to disable navigation – https://github.com/mantinedev/mantine/blob/master/packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts/#L27-L29. By itself, it does not disable items selection – it is outside the scope of the component. It is not planned to implement this feature on Combobox component. Instead, you should add this logic to your component if you receive readOnly prop. You can see example implementations of readOnly prop in the source code of Select component.

[grahampcharles]

Since Mantine leverages readonly (the HTML attribute) in this way (which makes a lot of sense), you can't really repurpose it. But I really like having a "readonly" state for my edit controls -- unlike disabled, readonly allows selection (for copy/paste, for example), which I think is better UX. So I extend the Mantine controls like this:

import { Select, SelectProps } from "@mantine/core";
import { forwardRef } from "react";

const SelectExtended = forwardRef<HTMLInputElement, SelectProps>(({ readOnly, ...props }, ref) => {
    
    return <>
        <Select
            ref={ref}
            readOnly={readOnly}
            data-readonly={readOnly}
            {...props}
        />
    </>
})

export default SelectExtended;

Then I can add global css rules that target data-readonly:

/* note Mantine Selects leverage the readonly attribute internally */
*:not(.mantine-Select-input)[readonly] {
  background-color: var(--mantine-color-gray-1);
}
.mantine-Select-input[data-readonly='true'] {
    background-color: var(--mantine-color-gray-1);
}