React-select: [v3] Autosize or alternative ?

[oudoulj]

I am trying to make the width of my select box match the length of the selected item (at startup with its default value and afterwards with the selected item)
I found out about autosize that does not seem to work (autosize={false} or autosize={true}).
_Is it deprecated maybe in v3 ?_
The example here does not work as soon as I set the width below "90%"
https://github.com/JedWatson/react-select/issues/2636#issuecomment-448649800

I am using React 16.8.6 and react-select 3.0.3 on a POC.

[themre]

yeah, autosize was a nice feature in v1. perhaps you can override it with

components={{
   Input: MyNormalInput
}}

const MyNormalInput = (props) => <input { ...props } />

[oudoulj]

yeah, autosize was a nice feature in v1. perhaps you can override it with

components={{
   Input: MyNormalInput
}}

const MyNormalInput = (props) => <input { ...props } />

It is only adding a border around the text but not shrinking the combobox itself.
I guess I need to specify a width but where and how ?

[themre]

const MyNormalInput = (props) => <input { ...props } style={{ width: '98%' }}/>?

[oudoulj]

^ Tried that to no avail :(

Here is the sample

[TriStarGod]

@oudoulj Were you able to get this working? I also noticed it uses react-input-autosize internally. Maybe its suppose to autosize by default but so far nothing I've tried works.

[schnerd]

Managed to hack something together with custom styles in v3, see this CodeSandbox for a demo.

View code

```javascript
export default function App() {
// Unfortunately neither "input" or "singleValue" receive isFocused
// in their style state, so we have to capture this value in the container
// style function and store it in a ref so that other style functions can
// access it.
// This makes assumptions about the order of style rendering and is not
// guaranteed to work consistently. Use at your own risk.
const isFocusedRef = useRef(false);

const customStyles = useMemo(
() => ({
container: (base, state) => {
isFocusedRef.current = state.isFocused;
return {
...base,
display: "inline-block"
};
},
placeholder: (base, state) => {
return {
...base,
...(isFocusedRef.current && state.value
? {}
: {
position: "static",
top: "auto",
transform: "none"
})
};
},
input: (base, state) => {
return {
...base,
...(isFocusedRef.current && state.value
? {}
: {
position: "absolute",
top: "50%",
transform: "translateY(-50%)"
})
};
},
singleValue: (base, state) => {
return {
...base,
maxWidth: "none",
...(isFocusedRef.current && state.value
? {}
: {
position: "static",
top: "auto",
transform: "none"
})
};
}
}),
[]
);

return (

options={options}
styles={customStyles}
placeholder="Search items..."
/>

);
}
```