selectboxでドロップダウンリストのオプション数を調整する

進行中のプロジェクトでselectboxをクリックした後に表示されるドロップダウンリストに5つのオプションを指定する必要がある場合があります.なんでもないけど、結構時間がかかりました・・・きろく🙃

1. <select size={num}>

これは、表示オプションの個数を指定する場合に最も簡単な方法です.でも….この方法は、クリック時にdropdownをポップアップするのではなく、最初に指定した数でdropdownを展開します.だから私にとって、解決方法は適切ではありません.
簡単なプレゼンテーション:http://www.tcpschool.com/html-tag-attrs/select-size

2.useRefとFocusEvent

他の方法を探していると、Stackoverflowで上記の文章を見ました.その文章の著者は貴重なデモリンクも添付した.(ちなみに、原文は一番下のコメントにリンクを残しています!)
ただreactで作成したプロジェクトで働いているので、そうは使えません!しかし、解決策が見つかった以上、少し変わっても一つのことではない.

この代わりにuserefを使用する

関数構成部品を使用しているので、thisは使用できません.逆にuserefを使用して、私が指す要素を指すことができます.そして次のようにすればいいです.

import { useRef } from 'react';

const SelectBox = (props: SelectBoxProps) => {
  const selectBox = useRef() as React.MutableRefObject<HTMLSelectElement>;

  return (
    <>
      <SelectBoxStyled {...props}>
        <select
          ref={selectBox}
          onFocus={() => {
            selectBox.current.size = 5;
          }}
          onBlur={() => {
            selectBox.current.size = 1;
          }}
          onChange={(e) => {
            selectBox.current.size = 1;
            selectBox.current.blur();
          }}
        >
      </SelectBoxStyled>
    </>
  );
};

export default SelectBox;

CSSの変更

これでselectboxをクリックするとdropdownに希望する個数のオプションが表示されます.しかし、この方法は...上の写真のように...dropdownの増加に伴いselectbox自体も増加します...だから私は以下のように修正しました.

//SelectBox.tsx
return (
  <>
    <SelectBoxStyled {...props}>
      <div className="select-wrap">
        <select { /*생략*/ }>
          <option value="">{props.subject}</option>
          {props.options ? props.options.map((option, idx) => (
              <option key={idx} value={option}>{option}</option>
            ))
          : null}
        </select>
      </div>
    </SelectBoxStyled>
  </>
);

//SelectBoxStyled.tsx
export const SelectBoxStyled = styled.div<SelectBoxProps>`
  position: relative;
  display: inline-block;
  .select-wrap {
    position: absolute;
  }
  select {
    display: inline-block;
  }
`;

positionプロパティを利用しました.では最上端に付いている美しいselectboxが出てきます!初めてselectbox customをやったのは面白い経験でした

リファレンス

https://stackoverflow.com/questions/23534440/how-to-set-height-for-the-drop-down-of-select-box