Почему после того как кликаю по выпадающему дочернему элементу выпадающий список закрывается, как это исправить?

Question

[Durilka96]

Есть выпадающий список, я открываю список кликом, а затем хочу выбрать несколько выпавших комбоксов, но после того как по одному комбобоксу кликну выпадающий список сразу закрывается, как сделать так чтобы он закрывался только когда кликают именно по нему и/или была возможность выбирать несколько комбобоксов?
Код выпадающего списка:

//раскрывающийся список с помощью функции
    const Dropdown = ({ text, children }) => {
        const [isOpen, setIsOpen] = useState(false);
        const toggleOpen = () => setIsOpen(isOpen => !isOpen);
        if (isOpen) {
            return (
                <div>
                    <button className="dropdown-btn-close" onClick={toggleOpen} >
                        {text}
                        <span className="fa-caret-down">▼</span>
                    </button>
                    {isOpen && <div>{children}</div>}
                </div>
            );
        }
        else {
            return (
                <div>
                    <button className="dropdown-btn-active" onClick={toggleOpen} >
                        {text}
                        <span className="fa-caret-down">▼</span>
                    </button>
                    {isOpen && <div>{children}</div>}
                </div>
            );
        }
    }

открытое состояние и закрытое соответственно

Answer 1

[Александр]

https://codesandbox.io/s/qna-q-1137116-i809oq?file...

Comments

[Durilka96]

Да, ваше решение рабочее, но мою проблему не решило( Я посидел потыкался и нашел почему именно список закрывается, дело в том что когда я тыкаю по input в котором или onChange вызываю функцию в которой вызываю dispath(), то выпадающий список закрывается, как-то это исправляется?

[Александр]

Durilka96, код оформляйте в песочницу с имитацией ответа из БД.

[Durilka96]

Александр, вот так прописываю, но почему-то подчеркивает здесь useDispath(), извините за простыню, не знаю как ссылку сформировать, вставьте в свой прошлый sandbox. Сырой код, но сейчас главное чтобы не закрывался выпадающий список при dispath()

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

// ответ от БД
const sizelist = [1,2,3,4,5,6,7]



const SET_SIZE_LIST ="SET_SIZE_LIST"
const defaultState = {
  items: [],
  sizeList: [],
};
const setSizeList = (sizelist) => ({type: SET_SIZE_LIST, payload: sizelist})
function sizediskReducer(state = defaultState, action) {
  console.log(action.type)
  switch (action.type) {
      
      case SET_SIZE_LIST:

          const size=3;
          return {
              ...state,
              sizeList: [...state.sizeList, size],
          }

      default:
          return state
  }
};


function updSizeList () {
  useDispatch(setSizeList());
};

const Dropdown = ({ text, children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleOpen = () => setIsOpen((isOpen) => !isOpen);
  

  return (
    <div>
      <button
        className={isOpen ? 'dropdown-btn-close' : 'dropdown-btn-active'}
        onClick={toggleOpen}
      >
        {text}
        <span className="fa-caret-down">▼</span>
      </button>
      {isOpen && <div>{children}</div>}
    </div>
  );
};

const App = () => (
  <>
    <Dropdown text="Drop 1">
    <div >
      <input id="1"  type="checkbox" onChange={updSizeList}/>
      <label htmlFor="1" >1</label>
    </div>
    </Dropdown>
    <Dropdown text="Drop 2">
      <div>
        <label>
          Item 4
          <input type="checkbox" />
        </label>
      </div>
      <div>
        <label>
          Item 5
          <input type="checkbox" />
        </label>
      </div>
      <div>
        <label>
          Item 6
          <input type="checkbox" />
        </label>
      </div>
    </Dropdown>
  </>
);

export default App;

[Александр]

Durilka96, обновил ответ. Советую более детально изучить работу с самим React'ом и уже потом изучать Redux.