need issue

[vincentpresentation12]

i have a problem, if i change control component, i cant open the menue list with phone after

[csandman]

I'd need a code sample in order to help you with this, I can't tell what might be going on otherwise.

[vincentpresentation12]

<Select
  useBasicStyles={true}
  // @ts-ignore
  options={props.options}
  closeMenuOnSelect={true}
  hideSelectedOptions={false}
  menuPlacement={menuPlacement}
  value={currentValue}
  variant={"outline"}
  instanceId={instanceId}
  onChange={handleChangeSelect}
  onFocus={() => setFocus(true)}
  onBlur={() => setFocus(false)}
  blurInputOnSelect={true}
  placeholder={props.placeholder || "Sélectionner"}
  styles={{
    menuPortal: (base) => ({
      ...base,
      zIndex: 9999,
    }),
  }}
  chakraStyles={{
    control: (base, state) => ({
      ...base,
      rounded: props.rounded ? props.rounded : "base",
      padding: "0 0",
      paddingLeft: 2,
      height: sizeInput?.heightSelect,
      minHeight: sizeInput?.heightSelect,
      backgroundColor: props.isInvalid ? "red.50" : "white",
      color: props.isInvalid ? "red.500" : "black",
      width: "full",
      outline: "none",
      fontSize: sizeInput?.fontSize,
      border: "none",
      _focusVisible: {
        border: "none",
        boxShadow: "none",
      },
    }),
    option: (provided: any, state: any) => ({
      ...provided,
      backgroundColor:
        state.isSelected && props.selectedBgColor
          ? props.selectedBgColor
          : state.isSelected
          ? "primary.500"
          : null,
      margin: "0.063rem 0",
      color: state.isSelected ? "white" : "primary.500",
      rounded: "sm",
      width: "full",
      minHeight: 9,
      height: "auto",
      fontSize: sizeInput?.fontSize,
      padding: 0,
      paddingLeft: "0.255rem",
      paddingTop: "0.2rem",
      paddingBottom: "0.2rem",
      borderBottom: "1px",
      borderBottomColor: "neutral.200",
      _last: {
        borderBottom: "none",
      },
    }),
    menuList: (provided: any) => ({
      ...provided,
      padding: "0.375rem 0",
      paddingRight: "0.375rem",
      paddingLeft: "0.375rem",
      border: "1px",
      boxShadow: `0px 0px 0px 1px ${theme.colors.neutral[200]}`,
      borderColor: "neutral.200",
    }),
    placeholder: (provided: any) => ({
      ...provided,
      padding: "0 0",
      margin: "0",
      fontSize: sizeInput?.fontSize,
    }),
    valueContainer: (provided: any) => ({
      ...provided,
      padding: "0 0",
      paddingLeft: props.icon ? "0" : "0.688rem",
      fontSize: sizeInput?.fontSize,
    }),
    singleValue: (provided: any) => ({
      ...provided,
      margin: "0 0",
      fontSize: sizeInput?.fontSize,
    }),
    inputContainer: (provided: any) => ({
      ...provided,
      padding: "0 0",
      margin: "0",
      fontSize: sizeInput?.fontSize,
    }),
    container: (provided: any) => ({
      ...provided,
      boxShadow: focus
        ? `0 0 0 3px ${theme.colors.primary[500]}25 `
        : undefined,
      rounded: props.rounded ? props.rounded : "base",
      borderWidth: "1px",
      borderColor: props.isInvalid
        ? "red.500"
        : focus
        ? theme.colors.primary[500]
        : "neutral.300",
    }),
  }}
  components={{
    DropdownIndicator: (dropdownProps) => (
      <VStack {...props} marginRight={"0.5rem"}>
        {iconSelected ? (
          <Icon boxSize={sizeInput?.iconSize}>{iconSelected}</Icon>
        ) : (
          <AisChevronSort boxSize={sizeInput?.iconSize} />
        )}
      </VStack>
    ),
    SingleValue: ({ children, ...data }) => (
      <components.SingleValue {...data}>
        <Flex>
          {data.data.icon && iconOnLeft && (
            <Box mr={1}>{data.data.icon}</Box>
          )}
          {children}
          {data.data.icon && !iconOnLeft && (
            <Box ml={1}>{data.data.icon}</Box>
          )}
        </Flex>
      </components.SingleValue>
    ),
    // Control: ({ children, ...data }) => (
    //   <components.Control {...data}>
    //     <Flex
    //       ml={props.icon ? 2 : 0}
    //       experimental_spaceX={1}
    //       w={"full"}
    //       height={"full"}
    //       alignItems={"center"}
    //     >
    //       {props.icon && (
    //         <Box
    //           w={"full"}
    //           color={
    //             notValid
    //               ? "red.500"
    //               : focus
    //               ? "primary.500"
    //               : "neutral.500"
    //           }
    //         >
    //           {props.icon}
    //         </Box>
    //       )}
    //       {children}
    //     </Flex>
    //   </components.Control>
    // ),
    NoOptionsMessage: (props) => (
      <Box textAlign={"center"}>
        <Text color={"neutral.300"} fontSize={sizeInput?.fontSize}>
          Aucun résultat
        </Text>
      </Box>
    ),
    Option: ({ children, ...data }) =>
      iconOnLeft ? (
        <chakraComponents.Option {...data}>
          <HStack width={"full"}>
            {/*@ts-ignore*/}
            {data.data.icon}
            <Text>{children}</Text>
          </HStack>
        </chakraComponents.Option>
      ) : (
        <chakraComponents.Option {...data}>
          <HStack width={"full"}>
            <Text>{children}</Text>
            {/*@ts-ignore*/}
            {data.data.icon}
          </HStack>
        </chakraComponents.Option>
      ),
  }}
/>

this is the code i use, the comment code is the part not working

[csandman]

I'm not sure if this is your issue, but how are you importing components?

Right now, both the components object, which is the original components from react-select, and chakraComponents, the customized components in chakra-react-select are being exported from the package. If you're importing the original components object, you should try switching them out for chakraComponents.

import { Select, chakraComponents } from "chakra-react-select";

const Example = () => (
  <Select
    // ...
    components={{
      // ...
      Control: ({ children, ...data }) => (
        <chakraComponents.Control {...data}>
          <Flex
            ml={props.icon ? 2 : 0}
            experimental_spaceX={1}
            w="full"
            height="full"
            alignItems="center"
          >
            {props.icon && (
              <Box
                w="full"
                color={
                  notValid ? "red.500" : focus ? "primary.500" : "neutral.500"
                }
              >
                {props.icon}
              </Box>
            )}
            {children}
          </Flex>
        </chakraComponents.Control>
      ),
      // ...
    }}
  />
);

I notice for some of the other components it appears you're using chakraComponents, so I'm not sure if you're using a mix of both or what, but this is my first instinct for what the problem is.