How to restrict the width of Dropdown to not exceed Input?

[amerfarooq]

I am trying to trigger a dropdown whenever the users enters something into an input field. The functionality seems to be working but I am confused about how I can set the width of my Dropdown to not exceed the width of Input. These are both Radix primitives. Right now, it looks like this. Would appreciate any ideas.

export const AddressInput = ({}) => {
  const [userInput, setUserInput] = useState('');
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const { placePredictions, getPlacePredictions, isPlacePredictionsLoading } =
    usePlacesAutocomplete();

  return (
    <Fragment>
      <Input
        value={userInput}
        label="Address"
        onChange={(evt) => {
          const addressTyped = evt.target.value;
          getPlacePredictions({ input: addressTyped });
          setUserInput(evt.target.value);
          if (addressTyped !== '') setDropdownOpen(true);
        }}
      />
      {!isPlacePredictionsLoading && (
        <Dropdown open={dropdownOpen} onOpenChange={setDropdownOpen}>
          <DropdownTrigger />
          <DropdownContent align="start">
            {placePredictions.map((p, i) => (
              <DropdownItem
                key={'p' + i}
                onClick={() => setUserInput(p.description)}
              >
                {p.description}
              </DropdownItem>
            ))}
            <DropdownItem>
              <span className="text-primary">Edit address manually</span>
            </DropdownItem>
          </DropdownContent>
        </Dropdown>
      )}
    </Fragment>
  );
};

[joaom00]

you can use the available CSS variable --radix-dropdown-menu-trigger-width but it looks like you are trying to turn the dropdown into a combobox/autocomplete and it really wasn't designed for that given that combobox/autocomplete has its own implications/accessibility concerns. I would recommend you wait for the combobox primitive to come out or use another library.