Prime React 下拉过滤器无法正常工作

Question

我正在使用 primereact/dropdown 呈现我的位置列表，用户可以在列表中选择，但我也在下拉列表中使用过滤方法，使用户也具有搜索功能，下拉列表工作正常，但我无法搜索原因，当我单击输入时，我可以看到输入上的焦点自动消失，我在引导模式之上使用它，我不确定为什么会出现这个问题，但我认为这是因为 Z -模态索引或者下拉菜单无法有效工作。任何有知识的人请帮助我解决这个问题：

以下是视频链接，以便更好地参考：

视频链接

下拉菜单的CSS：

模态CSS：

这是我的模态代码：

    import React, { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import axios from "axios";
import { citiesList } from "../../utils/citiesList";
import { toast, ToastContainer } from "react-toastify";
import ButtonLoader from "./button-loader";
import { Dropdown } from "primereact/dropdown";
import { Button, Modal } from "react-bootstrap";
import { Link } from "react-router-dom";

const LocationDataModal = ({
      //   locations,
      setUserLocation,
      // setLoading,
      setCourtsData,
      setImages,
    }: {
      //   locations: any;
      setUserLocation: any;
      setLoading?: any;
      setCourtsData?: any;
      setImages?: any;
    }) => {
      const {
        control,
        handleSubmit,
        formState: { errors },
      } = useForm();
      const [showModal, setShowModal] = useState(true); // Set to true to show on load
      const [searchTerm, setSearchTerm] = useState("");
      const [locationSelected, setLocationSelected] = useState<boolean>(false);
      const [locations, setLocations] = useState<string[]>([]);
      const [filteredLocations, setFilteredLocations] = useState(locations);
      const [loading, setLoading] = useState<boolean>(false);
    
      const userLocation = localStorage.getItem("userLocation");
    
      useEffect(() => {
        getCitiesData();
      }, []);
    
      const getCitiesData = async () => {
        const fetchedLocations = await citiesList();
        setLocations(fetchedLocations);
      };
    
      const handleSearch = (event: { target: { value: any } }) => {
        const value = event.target.value;
        setSearchTerm(value);
        setLocationSelected(false);
        setFilteredLocations(
          locations.filter((location: string) =>
            location.toLowerCase().includes(value.toLowerCase().trim())
          )
        );
      };
    
      const getUserLocation = () => {
        try {
          setLoading(true);
          if (navigator.geolocation) {
            const options = {
              enableHighAccuracy: true,
            };
            navigator.geolocation.getCurrentPosition(
              successLocation,
              failedLocation,
              options
            );
          } else {
            toast.error("Permission denied");
          }
        } catch (error) {
          console.error(error);
        } finally {
          setLoading(false);
        }
      };
    
      const successLocation = async (position: any) => {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
    
        try {
          setLoading(true);
          const response = await axios.get(
            `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`
          );
          const userLocation = response.data.address.city.toLowerCase();
    
          if (locations.includes(userLocation)) {
            setUserLocation(userLocation);
            localStorage.setItem("userLocation", userLocation);
          } else {
            toast.error(
              "We currently don't serve in your location, Please select from the dropdown below."
            );
          }
        } catch (error) {
          console.error(error);
          toast.error("Error fetching user location");
        } finally {
          setLoading(false);
        }
      };
    
      const failedLocation = () => {
        toast.error("Error fetching user location");
      };
    
      // Function to hide the modal
      const closeModal = () => {
        setShowModal(false);
      };
    
      useEffect(() => {
        const modalElement = document.getElementById("locationDetailsModal");
        if (modalElement && window.bootstrap) {
          const modal = new window.bootstrap.Modal(modalElement);
          modal.show(); // Show the modal on component mount
    
          modalElement.addEventListener("hidden.bs.modal", () => {
            setShowModal(false);
          });
        }
    
        return () => {
          if (modalElement) {
            modalElement.removeEventListener("hidden.bs.modal", closeModal);
          }
        };
      }, []);
    
      const SubmitHandler = async (data: any) => {
        const { userLocation } = data;
        setUserLocation(userLocation);
        localStorage.setItem("userLocation", userLocation);
      };
    
      return (
        <>
          <ToastContainer />
          <Modal
            show={showModal}
            onHide={closeModal}
            centered
            dialogClassName="modal custom-modal request-modal"
            id="upcoming-court"
            style={{ overflow: "visible" }}
            backdrop="static"
            tabIndex={-1}
          >
            <div className="modal-dialog-centered">
              <div className="modal-content">
                <div className="modal-header d-flex justify-content-between align-items-center">
                  <h4>Enter Your Location</h4>
                </div>
                <div className="modal-body">
                  <button
                    onClick={() => getUserLocation()}
                    className="btn btn-primary mb-4"
                  >
                    <div className="d-flex gap-2 align-items-center">
                      {loading ? (
                        <ButtonLoader />
                      ) : (
                        <>
                          <i className="feather-map-pin" />
                          <p className="m-0">Get My Location</p>
                        </>
                      )}
                    </div>
                  </button>
                  <form autoComplete="off" className="w-100">
                    <div className="card-body-chat">
                      <div className="sorting-select">
                        <Controller
                          name="userLocation"
                          control={control}
                          render={({ field }) => (
                            <Dropdown
                              filter
                              value={field.value || userLocation}
                              onChange={(e) => {
                                field.onChange(e.value);
                                setUserLocation(e.value);
                              }}
                              options={locations}
                              optionLabel="userLocation"
                              placeholder="Select Location"
                              className="select-bg w-100 list-sidebar-select"
                              onShow={() => {
                                const panelEl =
                                  document.querySelector(".p-dropdown-panel");
                                if (panelEl) {
                                  panelEl.style.zIndex = "2000";
                                }
                              }}
                            />
                          )}
                        />
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </Modal>
        </>
      );
    };

Answer 1

您可以使用 Dropdown 的 appendTo="self" 属性，像这样

                      <Dropdown
                          filter
                          appendTo="self"
                          value={field.value || userLocation}
                          options={locations}
                          optionLabel="userLocation"
                          onChange={(e) => {
                            field.onChange(e.value);
                            setUserLocation(e.value);
                          }}
                        />