How to set width = max-content?

[WesleyYue]

In the vanilla react-select, you could get a automatically sized component with:

              menu: (base) => ({
                ...base,
                width: "max-content",
                minWidth: "100%",
              }),

but this doesn't work in chakra-react-select. What do I need to do differently?

[csandman]

This appears to work perfectly to me!

Here's a functional example: https://codesandbox.io/s/jjimj0?file=/app.tsx

The one thing to make sure of is that you're using the chakraStyles prop instead of the original styles prop.

import React, { useState } from "react";
import { Container, FormControl, FormLabel } from "@chakra-ui/react";
import { Select, OptionBase } from "chakra-react-select";
import countries from "./data/countries";

interface CountryOption extends OptionBase {
  label: string;
  value: string;
}

const App: React.FC = () => {
  const [selectedColors, setSelectedColors] = useState<
    readonly CountryOption[]
  >([]);

  return (
    <Container mb={16} maxW="sm">
      <FormControl p={4}>
        <FormLabel>chakra-react-select automatically sized menu</FormLabel>
        <Select
          isMulti
          name="countries"
          options={countries}
          placeholder="Select some countries..."
          closeMenuOnSelect={false}
          value={selectedColors}
          onChange={setSelectedColors}
          chakraStyles={{
            menu: (base) => ({
              ...base,
              width: "max-content",
              minWidth: "100%",
            }),
          }}
        />
      </FormControl>
    </Container>
  );
};

export default App;

[WesleyYue]

Sorry, when I say auto size, I mean the entire component, not just the menu. Please see this codesandbox. In this, the chakra-react-select completely collapses when wrapped with a max-content parent, whereas the react-select sizes the entire component automatically.

      <Box width="max-content">
        <Select
          name="countries"
          options={countries}
          placeholder="Select some countries..."
          closeMenuOnSelect={false}
          value={selectedColors}
          onChange={setSelectedColors}
          variant="unstyled"
          chakraStyles={{
            menu: (base) => ({
              ...base,
              width: "max-content",
              minWidth: "100%"
            })
          }}
        />
      </Box>

      <Box width="max-content">
        <ReactSelect
          name="countries"
          options={countries}
          placeholder="Select some countries..."
          closeMenuOnSelect={false}
          value={selectedColors}
          onChange={setSelectedColors}
          styles={{
            menu: (base) => ({
              ...base,
              width: "max-content",
              minWidth: "100%"
            })
          }}
        />
      </Box>

[csandman]

Ah, I see what you're saying. I believe I found a style mismatch between some of the subcomponents of CRS and the original RS. Give me a bit to check out the styles, and I'll most likely push a new version to realign them. If not, I'll find a way to do it with custom styles.

[csandman]

Alright, I figured out where the discrepancies were and just pushed up a new version, v4.6.0!

Here's a complete functional example on the new version demonstrating that both packages behave in the same way: https://codesandbox.io/s/luczw3?file=/app.tsx

[WesleyYue]

awesome, thank you so much!

[Dregorio1]

@csandman Hello, and how in new version I can have old style? I want to have fixed width