AutoCompleteの三角マークを完全に消す方法

概要

AutoCompleteを使用していて、三角マーク🔻を見た目だけ消しても謎の余白ができ
入力欄を圧迫するということがあったので、解決策をメモ代わりに残しておきます。

実装

コード全容

TimeInput.jsx

import styled from 'styled-components'

const TimeInput: React.FC<Props> = ({
  time,
  onChangeTime,
}) => {
  const options = [
    { value: 0, name: '0秒' },
    { value: 1, name: '1秒' },
    { value: 2, name: '2秒' },
    { value: 3, name: '3秒' },
    { value: 4, name: '4秒' },
    { value: 5, name: '5秒' },
    { value: 10, name: '10秒' },
    { value: 20, name: '20秒' },
    { value: 30, name: '30秒' },
    { value: 60, name: '1分' },
    { value: 180, name: '3分' },
    { value: 300, name: '5分' },
    { value: 600, name: '10分' },
  ]

  return (
    <FieldSet>
      <TimeInputForm
        type="number"
        autoComplete="on"
        list="option"
        onChange={(e: any) => onChangeTime(e.target.value)}
        value={time}
      />
      <datalist id="option">
        {options.map((option, i) => {
          return (
            <option key={i} value={option.value}>
              {option.name}
            </option>
          )
        })}
      </datalist>
    </FieldSet>
  )
}

export default TimeInput

const FieldSet = styled.fieldset`
  width: 80px;
  height: 32px;
  margin-left: 8px;
  border: none;
`

const TimeInputForm = styled.input`
  width: 100%;
  height: 100%;
  padding-left: 6.5%;
  padding-right: 0;
  background-color: #f3f5f7;
  // 🔻を見た目＋幅、マージン、パディングも含めて完全に削除
  &::-webkit-calendar-picker-indicator {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
  // Numberフィールドのトグルを常時表示する
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    opacity: 1;
  }
`

解説：完全に消す方法

::-webkit-calendar-picker-indicator {
  width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

-webkit-calendar-picker-indicatorを指定し、opacityで見えなくして、
幅、マージン、パディングを消しています。
display: none;では反応しなかったので、この方法を取りました。

補足

AutoCompleteの実装方法

1. inputをfieldsetで囲む
2. inputタグのautoComplete属性をon、list属性に"option"(datalistタグのid属性)をセット
3. datalistタグの中にoptionタグで候補を入れる

AutoCompleteとInputの幅を合わせる

const FieldSet = styled.fieldset`
  width: 80px;
  height: 32px;
  margin-left: 8px;
  border: none;
`
const TimeInputForm = styled.input`
  width: 100%;
  height: 100%;
  padding-left: 6.5%;
  padding-right: 0;
  background-color: #f3f5f7;
  &::-webkit-calendar-picker-indicator {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    opacity: 1;
  }
`

fieldsetのボーダーを消し、inputのボーダーを採用します。
また、幅・高さはfieldsetに合うように100%を指定します。

Input type="number"のスピンボタンが反応しない

AutoCompleteの当たり判定とInputの当たり判定（フォーカス）が被ることで起きるエラーです。
スタッキングコンテキストの上の方に持ってくるposition: absolute;で
Inputのスピンボタンの優先度を上げます。

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    position: absolute;
    right: 1%;
    height: 20px;
    opacity: 1;
  }