Closed2024/03/29にクローズ1

shadcn/ui の Checkbox がいると overflow-scroll が何かおかしい

問題

この Checkbox の一番下にある、Formの中に複数の Checkbox が入っているやつをコピペして使っていた。すると、親で overflow-scroll や overflow-hidden しても期待したとおりの範囲で適用されない！

原因

Checkbox で隠蔽されて使われている(?) <input> が absolute によって遠くへ吹き飛んでいた。

なので、Checkbox の親を relative でラップしてあげると回避できた。

render={({ field }) => {
    return (
      <FormItem
        key={item.id}
        className="flex flex-row items-start gap-x-3 gap-y-0 relative" // relative を追加
        // あと↑でspace-x-3使われてたけど普通にgap-x-3でいいと思うので勝手に変えた
      >
        <FormControl>
          <Checkbox
            checked={field.value?.includes(item.id)}
            onCheckedChange={(checked) => {
              return checked
                ? field.onChange([...field.value, item.id])
                : field.onChange(
                    field.value?.filter(
                      (value) => value !== item.id
                    )
                  )
            }}
          />
        </FormControl>
        <FormLabel className="font-normal">
          {item.label}
        </FormLabel>
      </FormItem>
    )
}

問題

原因

関連