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:

• How to show scrollbar on dropdown menu for react-select?
• How to make react-select options scrollable

Answer 1

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.