Why React Select does not show all the options?

Question

I am using react-select with formik for showing options. I am trying to show the name of the seven days of a week. But it is not showing all the values in the list. Here is my component code:

import { ErrorMessage, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import React from "react";
import Select from "react-select";

const SEVEN_DAYS = [
  { label: "Saturday", value: "Saturday" },
  { label: "Sunday", value: "Sunday" },
  { label: "Monday", value: "Monday" },
  { label: "Tuesday", value: "Tuesday" },
  { label: "Wednesday", value: "Wednesday" },
  { label: "Thursday", value: "Thursday" },
  { label: "Friday", value: "Friday" },
];

const MyForm = (props) => {
  return (
    <Formik
      initialValues={{
        visitDays: "",
      }}
      validationSchema={Yup.object({
        visitDays: Yup.array().required("Required"),
      })}
      onSubmit={(values) => console.log(values)}
    >
      {(formikProps) => (
        <Form onSubmit={formikProps.handleSubmit}>
          <div className="form-row mt-5">
            <Col>
              <FormGroup>
                <label>Visiting Days</label>
                <Select
                  type="text"
                  name="visitingDays"
                  onChange={(option) => {
                    console.log(option);
                    option
                      ? formikProps.setFieldValue("visitingDays", option.value)
                      : formikProps.setFieldValue("visitingDays", "");
                  }}
                  options={SEVEN_DAYS}
                  onBlur={formikProps.handleBlur}
                  isMulti
                />
                <ErrorMessage
                  name="visitingDays"
                  component="div"
                  className="text-danger"
                />
              </FormGroup>
            </Col>
          </div>
          <div className="form-row mt-3 text-right">
            <Col>
              <Button
                className="primary-color"
                type="submit"
                disabled={!formikProps.dirty || formikProps.isSubmitting}
              >
                Submit
              </Button>
            </Col>
          </div>
        </Form>
      )}
    </Formik>
  );
};
export default MyForm;

It is not showing all the options and I can not see it when I am scrolling. But if I type, I can get the invisible option. Here is the image of the UI:

How should I fix this? I have tried the following solutions but could not solve the issue:

I don't think it's not rendered but possibly it's only not shown because of it's hidden by the parent element strict height or any visual behaviour, so you need to address your CSS instead. Can you check the DOM with the browser inspector? — doc_id

Hasinoor Rahman Hasinoor Rahman · Accepted Answer · 2020-11-18T07:47:45

react-select component is rendering options inside a div element. sometimes it can not show all options because some of these options gose behind the parent div of react-select component. please add a props menuPortalTarget and set its value to document.body. Your react-select component will look like

import { ErrorMessage, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import React from "react";
import Select from "react-select";

const SEVEN_DAYS = [
  { label: "Saturday", value: "Saturday" },
  { label: "Sunday", value: "Sunday" },
  { label: "Monday", value: "Monday" },
  { label: "Tuesday", value: "Tuesday" },
  { label: "Wednesday", value: "Wednesday" },
  { label: "Thursday", value: "Thursday" },
  { label: "Friday", value: "Friday" },
];

const MyForm = (props) => {
  return (
    <Formik
      initialValues={{
        visitDays: "",
      }}
      validationSchema={Yup.object({
        visitDays: Yup.array().required("Required"),
      })}
      onSubmit={(values) => console.log(values)}
    >
      {(formikProps) => (
        <Form onSubmit={formikProps.handleSubmit}>
          <div className="form-row mt-5">
            <Col>
              <FormGroup>
                <label>Visiting Days</label>
                <Select
                  type="text"
                  menuPortalTarget={document.body}
                  name="visitingDays"
                  onChange={(option) => {
                    console.log(option);
                    option
                      ? formikProps.setFieldValue("visitingDays", option.value)
                      : formikProps.setFieldValue("visitingDays", "");
                  }}
                  options={SEVEN_DAYS}
                  onBlur={formikProps.handleBlur}
                  isMulti
                />
                <ErrorMessage
                  name="visitingDays"
                  component="div"
                  className="text-danger"
                />
              </FormGroup>
            </Col>
          </div>
          <div className="form-row mt-3 text-right">
            <Col>
              <Button
                className="primary-color"
                type="submit"
                disabled={!formikProps.dirty || formikProps.isSubmitting}
              >
                Submit
              </Button>
            </Col>
          </div>
        </Form>
      )}
    </Formik>
  );
};
export default MyForm;

I hope this should fix the problem.

Why React Select does not show all the options?

1 Answers