[React] React-Select 메뉴 클릭 시, 드롭다운 메뉴 뒤 클릭 이슈

react-select를 사용해서 Select를 구현할 때, 드롭다운 메뉴 클릭 시 뒤에 있는 다른 부분이 선택되는 이슈
아래 예시는 Select 드롭다운 메뉴 뒤에 CheckBox가 있어서 드롭다운 메뉴 중 하나 선택 시, 뒤쪽 CheckBox가 선택되는 이슈임.

---

1. menuPortalTarget 설정 (react-select 전용)

react-select에서는 드롭다운 메뉴가 별도의 포탈로 렌더링되기 때문에 menuPortalTarget 속성을 document.body로 설정하면 문제를 해결할 수 있습니다.

<Select
  value={this.state.temp1}
  options={this.state.temp1List}
  onChange={e => this.setState({ temp1: e })}
  menuPortalTarget={document.body} // 포탈을 body에 렌더링
  styles={{
    menuPortal: base => ({ ...base, zIndex: 9999 }), // z-index 설정
  }}
/>

이렇게 하면 드롭다운 메뉴가 항상 최상단에 렌더링되어 뒤에 있는 CheckBox와의 충돌을 방지할 수 있습니다.

---

AS-IS

<div>
  <div>
    <Select
      value={this.state.temp1}
      options={this.state.temp1List}
      onChange={e =>
        this.setState({ temp1: e })
      }  
    />
  </div>

  <div>
    <FormLabel>Status</FormLabel>
    <FormGroup row>
      <FormControlLabel
        control={
          <CheckBox
            checked={this.state.test1}
            onChange={this.handleChkBox("Test1")}
            color="primary"
          />
        }
        label={consts.BABO}
      />
    </FormGroup>
  </div>
</div>

 

 

TO-BE

<div>
  <div>
    <Select
      value={this.state.temp1}
      options={this.state.temp1List}
      onChange={e =>
        this.setState({ temp1: e })
      }  
      menuPortalTarget={document.body} // 포탈을 body에 렌더링
      styles={{
        menuPortal: base => ({ ...base, zIndex: 9999 }), // z-index 설정
      }}
    />
  </div>

  <div>
    <FormLabel>Status</FormLabel>
    <FormGroup row>
      <FormControlLabel
        control={
          <CheckBox
            checked={this.state.test1}
            onChange={this.handleChkBox("Test1")}
            color="primary"
          />
        }
        label={consts.BABO}
      />
    </FormGroup>
  </div>
</div>