How to set the length of an dropdown menu?

[TobiasSteinhagen]

Hello there,

we tried different ways to set the length of the select for countries and cities, i.e. with maxMenuHeight={10} (like you see in the code with the Country) or with some functions like here.

Unfortunately it doesn't work.

import { City, Country } from "country-state-city";
import {
  StyledContainer,
  StyledForm,
  StyledInput,
  StyledLabel,
  StyledSelect,
} from "./TripForm.styled";

import CancelButton from "@/components/CancelButton";
import CancelIcon from "@/components/CancelButton/CancelIcon.svg";
import CreateButton from "@/components/CreateButton";
import CreateIcon from "@/components/CreateButton/CreateIcon.svg";
import { useState } from "react";

export default function TripForm({
  handleAddTrip,
  endDateDisabled,
  handleDisabled,
}) {
  const countries = Country.getAllCountries();
  const [isoCode, setIsoCode] = useState(countries[0].isoCode);
  const cities = City.getCitiesOfCountry(isoCode);

  function handleIsoCode(event) {
    setIsoCode(event.target.value);
  }

  function onSubmit(event) {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(event.target));
    const isoCode = event.target.country.value;
    const { name } = Country.getCountryByCode(isoCode);
    const coordinates = event.target.city.value.split("-");
    const [lat, long, cityname] = coordinates;
    const latitude = Number(lat).toFixed(4);
    const longitude = Number(long).toFixed(4);

    handleAddTrip({
      ...data,
      country: {
        name,
        isoCode,
      },
      city: {
        cityname,
        longitude,
        latitude,
      },
    });
  }

  return (
    <>
      <StyledForm onSubmit={onSubmit}>
        <StyledLabel>
          Country
          <StyledSelect
            name="country"
            onChange={handleIsoCode}
            required
            maxMenuHeight={10}
          >
            {countries.map(({ isoCode, flag, name }) => (
              <option key={isoCode} value={isoCode}>
                {name} {flag}
              </option>
            ))}
          </StyledSelect>
        </StyledLabel>
        <StyledLabel>
          City
          <StyledSelect name="city" required>
            {cities
              .filter(({ countryCode }) => countryCode === isoCode)
              .map(({ latitude, longitude, name, stateCode }) => (
                <option
                  key={`${latitude}-${longitude}-${name}`}
                  value={`${latitude}-${longitude}-${name}`}
                >
                  {name} - {stateCode}
                </option>
              ))}
          </StyledSelect>
        </StyledLabel>
        <StyledLabel>
          Title
          <StyledInput
            name="title"
            placeholder="Title of your trip"
            minLength={3}
            required
          />
        </StyledLabel>
        <StyledLabel>
          Start date
          <StyledInput name="startDate" type="date" onChange={handleDisabled} />
        </StyledLabel>
        <StyledLabel>
          End date
          <StyledInput
            name="endDate"
            type="date"
            required
            disabled={endDateDisabled}
          />
        </StyledLabel>
        <CreateButton>
          <CreateIcon /> Create
        </CreateButton>
      </StyledForm>
      <StyledContainer>
        <CancelButton>
          <CancelIcon /> Cancel
        </CancelButton>
      </StyledContainer>
    </>
  );
}

Here is the PR

Maybe you have an idea, how we can set the length?
Looking forward to your feedback and thanks in advance! ✌️

[julialoeschel]

Hey,
I am not sure what is the overall goal of this approach, but my first guess is, that you need to shorten the Array you map over, to the desired length.

you could either get a certain amount of entries from your database (check out this) or manually shorten your countriesArray with known js methods.

both will get you a shorter optionsMenue. Depending on the Main goal and how you use it, its better to use one ore the other. Try to discuss in your group which one will be best.

hope that helps
Julia

[TobiasSteinhagen]

Hey Julia,

Thank you for your feedback! We receive the data from an api and we can't shorten that, because our app has the function to plan trips/holidays and the user needs to have the opportunity to choose from all of them.

And in the frontend it looks like this

And we want that list smaller, with a scroll down to have a better user experience.

Hope that helps to get the goal of this question ✌️🙂

[TobiasSteinhagen]

We just observed that one problem is the size of my screen....sorry for that, but anyway it would be nice to know how to set the length of the menu so that we can adjust it if we want to 😊

[TobiasSteinhagen]

The answer is to use a library, i.e. react-select, for the select elements. We can't manipulate the default settings of the browser, in this case, to change the appearance of the menu.

[julialoeschel]

great, that would been my suggestion. The value you want to tackle for the height of the container is very much dependent from the browser and therefor not so easy to cover all of them. The library should work, great pick.