feat: enhance dropdown components by integrating useClickOutside hook for improved user experience and accessibility in NewWorkshopDropdown and WorkshopTabs

2026-02-18 08:25:08 +01:00
parent d50a8a0266
commit ee13f8ba99
9 changed files with 189 additions and 197 deletions
--- a/src/app/sessions/NewWorkshopDropdown.tsx
+++ b/src/app/sessions/NewWorkshopDropdown.tsx
@@ -1,21 +1,23 @@
 'use client';

-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui';
 import { WORKSHOPS } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';

 export function NewWorkshopDropdown() {
  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useClickOutside(containerRef, () => setOpen(false), open);

  return (
-    <div className="relative">
+    <div ref={containerRef} className="relative">
      <Button
        type="button"
        variant="outline"
        size="sm"
        onClick={() => setOpen(!open)}
-        onBlur={() => setTimeout(() => setOpen(false), 150)}
        className="gap-1.5"
      >
        Nouvel atelier
--- a/src/app/sessions/WorkshopTabs.tsx
+++ b/src/app/sessions/WorkshopTabs.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useTransition } from 'react';
+import { useState, useTransition, useRef } from 'react';
 import Link from 'next/link';
 import { useSearchParams, useRouter } from 'next/navigation';
 import {
@@ -25,6 +25,7 @@ import {
  getWorkshop,
  getSessionPath,
 } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';

 const TYPE_TABS = [
  { value: 'all' as const, icon: '📋', label: 'Tous' },
@@ -429,13 +430,14 @@ function TypeFilterDropdown({
  const current = TYPE_TABS.find((t) => t.value === activeTab) ?? TYPE_TABS[0];
  const isTypeSelected = activeTab !== 'all' && activeTab !== 'byPerson';
  const totalCount = typeTabs.reduce((s, t) => s + (counts[t.value] ?? 0), 0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useClickOutside(containerRef, () => onOpenChange(false), open);

  return (
-    <div className="relative">
+    <div ref={containerRef} className="relative">
      <button
        type="button"
        onClick={() => onOpenChange(!open)}
-        onBlur={() => setTimeout(() => onOpenChange(false), 150)}
        className={`
          flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm transition-colors
          ${isTypeSelected ? 'bg-primary text-primary-foreground' : 'text-muted hover:bg-card-hover hover:text-foreground'}
--- a/src/components/collaboration/ShareModal.tsx
+++ b/src/components/collaboration/ShareModal.tsx
@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { Avatar } from '@/components/ui/Avatar';
+import { Select } from '@/components/ui/Select';
 import { getTeamMembersForShare, type TeamWithMembers } from '@/lib/share-utils';
 import type { ShareRole } from '@prisma/client';

@@ -41,8 +42,10 @@ interface ShareModalProps {
  helpText?: React.ReactNode;
 }

-const SELECT_STYLE =
-  'appearance-none rounded-lg border border-border bg-card px-3 py-2.5 pr-10 text-sm text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20';
+const ROLE_OPTIONS = [
+  { value: 'EDITOR', label: 'Éditeur' },
+  { value: 'VIEWER', label: 'Lecteur' },
+] as const;

 export function ShareModal({
  isOpen,
@@ -151,10 +154,12 @@ export function ShareModal({
                  className="flex-1"
                  required
                />
-                <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={SELECT_STYLE}>
-                  <option value="EDITOR">Éditeur</option>
-                  <option value="VIEWER">Lecteur</option>
-                </select>
+                <Select
+                  value={role}
+                  onChange={(e) => setRole(e.target.value as ShareRole)}
+                  options={[...ROLE_OPTIONS]}
+                  wrapperClassName="w-auto shrink-0 min-w-[7rem]"
+                />
              </div>
            )}

@@ -171,30 +176,25 @@ export function ShareModal({
                  </p>
                ) : (
                  <div className="flex gap-2">
-                    <div className="relative flex-1">
-                      <select
-                        value={selectedMemberId}
-                        onChange={(e) => setSelectedMemberId(e.target.value)}
-                        className={`w-full ${SELECT_STYLE}`}
-                        required
-                      >
-                        <option value="">Sélectionner un membre</option>
-                        {teamMembers.map((m) => (
-                          <option key={m.id} value={m.id}>
-                            {m.name || m.email} {m.name && `(${m.email})`}
-                          </option>
-                        ))}
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </div>
-                    </div>
-                    <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={SELECT_STYLE}>
-                      <option value="EDITOR">Éditeur</option>
-                      <option value="VIEWER">Lecteur</option>
-                    </select>
+                    <Select
+                      value={selectedMemberId}
+                      onChange={(e) => setSelectedMemberId(e.target.value)}
+                      options={[
+                        { value: '', label: 'Sélectionner un membre', disabled: true },
+                        ...teamMembers.map((m) => ({
+                          value: m.id,
+                          label: m.name ? `${m.name} (${m.email})` : m.email,
+                        })),
+                      ]}
+                      wrapperClassName="flex-1 min-w-0"
+                      required
+                    />
+                    <Select
+                      value={role}
+                      onChange={(e) => setRole(e.target.value as ShareRole)}
+                      options={[...ROLE_OPTIONS]}
+                      wrapperClassName="w-auto shrink-0 min-w-[7rem]"
+                    />
                  </div>
                )}
              </div>
@@ -211,39 +211,27 @@ export function ShareModal({
                    .
                  </p>
                ) : (
-                  <>
-                    <div className="relative">
-                      <select
-                        value={teamId}
-                        onChange={(e) => setTeamId(e.target.value)}
-                        className={`w-full ${SELECT_STYLE}`}
-                        required
-                      >
-                        <option value="">Sélectionner une équipe</option>
-                        {userTeams.map((team) => (
-                          <option key={team.id} value={team.id}>
-                            {team.name} {team.userRole === 'ADMIN' && '(Admin)'}
-                          </option>
-                        ))}
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </div>
-                    </div>
-                    <div className="relative">
-                      <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={`w-full ${SELECT_STYLE}`}>
-                        <option value="EDITOR">Éditeur</option>
-                        <option value="VIEWER">Lecteur</option>
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </div>
-                    </div>
-                  </>
+                  <div className="flex gap-2">
+                    <Select
+                      value={teamId}
+                      onChange={(e) => setTeamId(e.target.value)}
+                      options={[
+                        { value: '', label: 'Sélectionner une équipe', disabled: true },
+                        ...userTeams.map((team) => ({
+                          value: team.id,
+                          label: `${team.name}${team.userRole === 'ADMIN' ? ' (Admin)' : ''}`,
+                        })),
+                      ]}
+                      wrapperClassName="flex-1 min-w-0"
+                      required
+                    />
+                    <Select
+                      value={role}
+                      onChange={(e) => setRole(e.target.value as ShareRole)}
+                      options={[...ROLE_OPTIONS]}
+                      wrapperClassName="w-auto shrink-0 min-w-[7rem]"
+                    />
+                  </div>
                )}
              </div>
            )}
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -4,15 +4,20 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useSession, signOut } from 'next-auth/react';
 import { useTheme } from '@/contexts/ThemeContext';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Avatar, RocketIcon } from '@/components/ui';
 import { WORKSHOPS } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';

 export function Header() {
  const { theme, toggleTheme } = useTheme();
  const { data: session, status } = useSession();
  const [menuOpen, setMenuOpen] = useState(false);
  const [workshopsOpen, setWorkshopsOpen] = useState(false);
+  const workshopsDropdownRef = useRef<HTMLDivElement>(null);
+  const userMenuRef = useRef<HTMLDivElement>(null);
+  useClickOutside(workshopsDropdownRef, () => setWorkshopsOpen(false), workshopsOpen);
+  useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
  const pathname = usePathname();

  const isActiveLink = (path: string) => pathname.startsWith(path);
@@ -61,10 +66,9 @@ export function Header() {
              </Link>

              {/* New Workshop Dropdown */}
-              <div className="relative">
+              <div className="relative" ref={workshopsDropdownRef}>
                <button
                  onClick={() => setWorkshopsOpen(!workshopsOpen)}
-                  onBlur={() => setTimeout(() => setWorkshopsOpen(false), 150)}
                  className={`flex items-center gap-1 text-sm font-medium transition-colors ${
                    WORKSHOPS.some((w) => isActiveLink(w.path))
                      ? 'text-primary'
@@ -120,7 +124,7 @@ export function Header() {
          {status === 'loading' ? (
            <div className="h-9 w-20 animate-pulse rounded-lg bg-card-hover" />
          ) : status === 'authenticated' && session?.user ? (
-            <div className="relative">
+            <div ref={userMenuRef} className="relative">
              <button
                onClick={() => setMenuOpen(!menuOpen)}
                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
@@ -145,9 +149,7 @@ export function Header() {
              </button>

              {menuOpen && (
-                <>
-                  <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
-                  <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
+                <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
                    <div className="border-b border-border px-4 py-2">
                      <p className="text-xs text-muted">Connecté en tant que</p>
                      <p className="truncate text-sm font-medium text-foreground">
@@ -175,7 +177,6 @@ export function Header() {
                      Se déconnecter
                    </button>
                  </div>
-                </>
              )}
            </div>
          ) : (
--- a/src/components/swot/ActionPanel.tsx
+++ b/src/components/swot/ActionPanel.tsx
@@ -2,7 +2,7 @@

 import { useState, useTransition } from 'react';
 import type { SwotItem, Action, ActionLink, SwotCategory } from '@prisma/client';
-import { Button, Badge, Modal, ModalFooter, Input, Textarea } from '@/components/ui';
+import { Button, Badge, Modal, ModalFooter, Input, Textarea, Select } from '@/components/ui';
 import { createAction, updateAction, deleteAction } from '@/actions/swot';

 type ActionWithLinks = Action & {
@@ -40,11 +40,11 @@ const categoryShort: Record<SwotCategory, string> = {
 };

 const priorityLabels = ['Basse', 'Moyenne', 'Haute'];
-const statusLabels: Record<string, string> = {
-  todo: 'À faire',
-  in_progress: 'En cours',
-  done: 'Terminé',
-};
+const statusOptions = [
+  { value: 'todo', label: '📋 À faire' },
+  { value: 'in_progress', label: '⏳ En cours' },
+  { value: 'done', label: '✅ Terminé' },
+];

 export function ActionPanel({
  sessionId,
@@ -279,16 +279,15 @@ export function ActionPanel({
                >
                  {priorityLabels[action.priority]}
                </Badge>
-                <select
+                <Select
                  value={action.status}
                  onChange={(e) => handleStatusChange(action, e.target.value)}
-                  className="rounded border border-border bg-card px-2 py-1 text-xs text-foreground"
+                  options={statusOptions}
+                  size="xs"
+                  wrapperClassName="!w-auto shrink-0"
+                  className="!w-auto"
                  disabled={isPending}
-                >
-                  <option value="todo">{statusLabels.todo}</option>
-                  <option value="in_progress">{statusLabels.in_progress}</option>
-                  <option value="done">{statusLabels.done}</option>
-                </select>
+                />
              </div>
            </div>
          ))}
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -1,24 +1,63 @@
 import { forwardRef, SelectHTMLAttributes } from 'react';

-interface SelectOption {
+export interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
 }

-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+const SIZE_STYLES = {
+  xs: 'px-2 py-1 pr-7 text-xs',
+  sm: 'px-2 py-2 pr-8 text-sm',
+  md: 'px-4 py-2.5 pr-10 text-sm',
+  lg: 'px-4 py-2.5 pr-10 text-base',
+} as const;
+
+const ICON_SIZES = {
+  xs: 'h-3 w-3',
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-5 w-5',
+} as const;
+
+const ICON_POSITION = {
+  xs: 'right-2',
+  sm: 'right-2',
+  md: 'right-3',
+  lg: 'right-3',
+} as const;
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'size'> {
  label?: string;
  error?: string;
  options: SelectOption[];
  placeholder?: string;
+  size?: keyof typeof SIZE_STYLES;
+  wrapperClassName?: string;
 }

 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ className = '', label, error, id, options, placeholder, ...props }, ref) => {
+  (
+    {
+      className = '',
+      label,
+      error,
+      id,
+      options,
+      placeholder,
+      size = 'md',
+      wrapperClassName = '',
+      ...props
+    },
+    ref
+  ) => {
    const selectId = id || props.name;
+    const sizeStyles = SIZE_STYLES[size];
+    const iconSize = ICON_SIZES[size];
+    const iconPosition = ICON_POSITION[size];

    return (
-      <div className="w-full">
+      <div className={wrapperClassName || 'w-full'}>
        {label && (
          <label htmlFor={selectId} className="mb-2 block text-sm font-medium text-foreground">
            {label}
@@ -29,11 +68,13 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
            ref={ref}
            id={selectId}
            className={`
-              w-full appearance-none rounded-lg border bg-input px-4 py-2.5 pr-10 text-foreground
+              w-full appearance-none rounded-lg border bg-input text-foreground
              placeholder:text-muted-foreground
              focus:outline-none focus:ring-2 focus:ring-primary/20
              disabled:cursor-not-allowed disabled:opacity-50
-              ${error ? 'border-destructive focus:border-destructive' : 'border-input-border focus:border-primary'}
+              border-input-border focus:border-primary
+              ${sizeStyles}
+              ${error ? 'border-destructive focus:border-destructive' : ''}
              ${className}
            `}
            {...props}
@@ -49,14 +90,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
              </option>
            ))}
          </select>
-          {/* Custom arrow icon */}
-          <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-            <svg
-              className="h-5 w-5 text-muted-foreground"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
+          <div className={`pointer-events-none absolute ${iconPosition} top-1/2 -translate-y-1/2 text-muted-foreground`}>
+            <svg className={iconSize} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </div>
@@ -68,4 +103,3 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 );

 Select.displayName = 'Select';
-
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -14,6 +14,7 @@ export { ParticipantInput } from './ParticipantInput';
 export { Modal, ModalFooter } from './Modal';
 export { RocketIcon } from './RocketIcon';
 export { Select } from './Select';
+export type { SelectOption } from './Select';
 export { Textarea } from './Textarea';
 export { ToggleGroup } from './ToggleGroup';
 export type { ToggleOption } from './ToggleGroup';
--- a/src/components/weather/WeatherCard.tsx
+++ b/src/components/weather/WeatherCard.tsx
@@ -4,6 +4,7 @@ import { useState, useTransition, useEffect } from 'react';
 import { createOrUpdateWeatherEntry } from '@/actions/weather';
 import { Avatar } from '@/components/ui/Avatar';
 import { Textarea } from '@/components/ui/Textarea';
+import { Select } from '@/components/ui/Select';

 const WEATHER_EMOJIS = [
  { emoji: '', label: 'Aucun' },
@@ -140,29 +141,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
      {/* Performance */}
      <td className="w-24 px-2 py-3">
        {canEditThis ? (
-          <div className="relative mx-auto w-fit">
-            <select
-              value={performanceEmoji || ''}
-              onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-            >
-              {WEATHER_EMOJIS.map(({ emoji }) => (
-                <option key={emoji || 'none'} value={emoji}>
-                  {emoji}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
+          <Select
+            value={performanceEmoji || ''}
+            onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+            size="sm"
+            wrapperClassName="!w-fit mx-auto"
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
+          />
        ) : (
          <div className="text-2xl text-center">{performanceEmoji || '-'}</div>
        )}
@@ -171,29 +157,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
      {/* Moral */}
      <td className="w-24 px-2 py-3">
        {canEditThis ? (
-          <div className="relative mx-auto w-fit">
-            <select
-              value={moralEmoji || ''}
-              onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-            >
-              {WEATHER_EMOJIS.map(({ emoji }) => (
-                <option key={emoji || 'none'} value={emoji}>
-                  {emoji}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
+          <Select
+            value={moralEmoji || ''}
+            onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+            size="sm"
+            wrapperClassName="!w-fit mx-auto"
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
+          />
        ) : (
          <div className="text-2xl text-center">{moralEmoji || '-'}</div>
        )}
@@ -202,29 +173,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
      {/* Flux */}
      <td className="w-24 px-2 py-3">
        {canEditThis ? (
-          <div className="relative mx-auto w-fit">
-            <select
-              value={fluxEmoji || ''}
-              onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-            >
-              {WEATHER_EMOJIS.map(({ emoji }) => (
-                <option key={emoji || 'none'} value={emoji}>
-                  {emoji}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
+          <Select
+            value={fluxEmoji || ''}
+            onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+            size="sm"
+            wrapperClassName="!w-fit mx-auto"
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
+          />
        ) : (
          <div className="text-2xl text-center">{fluxEmoji || '-'}</div>
        )}
@@ -233,29 +189,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
      {/* Création de valeur */}
      <td className="w-24 px-2 py-3">
        {canEditThis ? (
-          <div className="relative mx-auto w-fit">
-            <select
-              value={valueCreationEmoji || ''}
-              onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-            >
-              {WEATHER_EMOJIS.map(({ emoji }) => (
-                <option key={emoji || 'none'} value={emoji}>
-                  {emoji}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
+          <Select
+            value={valueCreationEmoji || ''}
+            onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+            size="sm"
+            wrapperClassName="!w-fit mx-auto"
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
+          />
        ) : (
          <div className="text-2xl text-center">{valueCreationEmoji || '-'}</div>
        )}
--- a/src/hooks/useClickOutside.ts
+++ b/src/hooks/useClickOutside.ts
@@ -0,0 +1,24 @@
+import { useEffect, RefObject } from 'react';
+
+/**
+ * Calls callback when a mousedown occurs outside the ref element.
+ * Uses mousedown (not click) so it fires before blur and gives consistent behavior.
+ */
+export function useClickOutside<T extends HTMLElement>(
+  ref: RefObject<T | null>,
+  handler: () => void,
+  enabled = true
+) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        handler();
+      }
+    };
+
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => document.removeEventListener('mousedown', handleMouseDown);
+  }, [ref, handler, enabled]);
+}