feat: wheel behaviour on choiceselect

2026-09-13 09:08:42 +02:00
parent 9f2ace9698
commit 30e1c0b0a9
1 changed files with 26 additions and 1 deletions
@@ -23,8 +23,22 @@ function ChoiceSelect<T extends string>({
  className = '',
  style,
 }: ChoiceSelectProps<T>) {
+  const step = (direction: 1 | -1) => {
+    const currentIndex = options.indexOf(value);
+
+    if (currentIndex === -1 || options.length === 0) return;
+
+    const nextIndex =
+      (currentIndex + direction + options.length) % options.length;
+
+    onChange(options[nextIndex]);
+  };
+
  return (
-    <div className={`choice-select ${className}`} data-disabled={disabled || undefined}>
+    <div
+      className={`choice-select ${className}`}
+      data-disabled={disabled || undefined}
+    >
      <select
        id={id}
        className="choice-select__input"
@@ -35,6 +49,17 @@ function ChoiceSelect<T extends string>({
          onChange(e.target.value as T);
          e.currentTarget.blur();
        }}
+        onWheel={(e) => {
+          e.preventDefault();
+
+          if (disabled) return;
+
+          if (e.deltaY < 0) {
+            step(1);
+          } else if (e.deltaY > 0) {
+            step(-1);
+          }
+        }}
      >
        {options.map((option) => (
          <option key={option} value={option}>