Блог

Мне нужно окно поиска внутри выпадающего списка. Я вставил окно поиска, но не могу ничего ввести, так как при нажатии курсор не появляется. Не уверен, связано ли это с перекрытием. Как я могу решить эту проблему?

Я создал два окна поиска — одно внутри выпадающего списка, а другое снаружи, просто чтобы посмотреть, как на самом деле работает поиск. Один внешний позволяет мне печатать, а другой — нет.

Ниже приведен код.

 import React, { Component } from "react";
import ReactDOM from "react-dom";
import DpDwn from "./dropdown.json";
import "./App.css";
import "./carbon-components-stylesheet.css";
import {
  DropdownV2,
  Search,
  Accordion,
  AccordionItem
} from "carbon-components-react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: "Label",
      selectedId: 0
    };
  }

  render() {
    const onChange = search_item => {
      console.log(search_item.target.value);
    };
    const itemToElement = item => {
      return (
        <li
          style={{ height: 20 }}
          value={item.value}
          onClick={evt => {
            evt.preventDefault();
          }}
          onKeyPress={evt => evt.preventDefault()}
          tabIndex={-1}
          id="listUsed"
        >
          <Search
            className="some-class"
            name="abc"
            defaultValue=""
            labelText="Search"
            closeButtonLabelText=""
            placeHolderText="Search"
            onChange={onChange}
            onClick={event => {
              console.log("hi");
            }}
            id="search-2"
          />
          <Accordion>
            {item.lvl_1.map((item0, index) => {
              return (
                <AccordionItem title={item0.BUSINESS_UNIT_NAME} id="lvl1">
                  {item0.lvl_2.map((item1, index) => {
                    return (
                      <AccordionItem title={item1.BRAND_NAME} id="lvl2">
                        {item1.lvl_3.map((item2, index) => {
                          return (
                            <p
                              onClick={() => {
                                ReactDOM.findDOMNode(
                                  this
                                ).getElementsByClassName(
                                  "bx--list-box__menu"
                                )[0].style.display = "none";

                                ReactDOM.findDOMNode(
                                  this
                                ).getElementsByClassName(
                                  "bx--list-box__menu-icon bx--list-box__menu-icon--open"
                                )[0].className = "bx--list-box__menu-icon";

                                this.setState({
                                  selectedItem: item2.NAME,
                                  selectedId: item2.VALUE
                                });
                              }}
                            >
                              {item2.NAME}
                            </p>
                          );
                        })}
                      </AccordionItem>
                    );
                  })}
                </AccordionItem>
              );
            })}
          </Accordion>
        </li>
      );
    };
    const items4dropDown = DpDwn.map(item => ({
      lvl_1: item.lvl_1
    }));

    return (
      <div className="App">
        <div style={{ width: 300, position: "relative", top: "100px" }}>
          <Search
            className="some-class"
            name="abc"
            defaultValue=""
            labelText="Search"
            closeButtonLabelText=""
            placeHolderText="Search"
            onChange={onChange}
            onClick={event => {
              console.log("hi");
            }}
            id="search-1"
          />
          <DropdownV2
            label={this.state.selectedItem}
            ariaLabel="Dropdown"
            items={items4dropDown}
            itemToElement={itemToElement}
            onClick={evt => {
              evt.preventDefault();
            }}
          />
        </div>
      </div>
    );
  }
}

export default App;
 

Мне нужно, чтобы поле поиска внутри выпадающего списка отображало курсор, чтобы он позволял вводить текст