diff --git a/components/BeoSelector.tsx b/components/BeoSelector.tsx index 2acdfbc..7454cd6 100644 --- a/components/BeoSelector.tsx +++ b/components/BeoSelector.tsx @@ -54,9 +54,10 @@ export default function BeoSelector({ selected, onChange }: Props) { {available.length > 0 && ( ({ value: String(b.ID), label: `${b.Kuerzel} — ${b.Name}` }))} onChange={add} + keepOpen /> )} diff --git a/components/CustomSelect.tsx b/components/CustomSelect.tsx index d581a66..25e8cb9 100644 --- a/components/CustomSelect.tsx +++ b/components/CustomSelect.tsx @@ -12,9 +12,10 @@ interface Props { options: SelectOption[]; placeholder: string; onChange: (value: string) => void; + keepOpen?: boolean; } -export default function CustomSelect({ options, placeholder, onChange }: Props) { +export default function CustomSelect({ options, placeholder, onChange, keepOpen = false }: Props) { const [open, setOpen] = useState(false); const ref = useRef(null); @@ -29,7 +30,7 @@ export default function CustomSelect({ options, placeholder, onChange }: Props) }, [open]); function select(value: string) { - setOpen(false); + if (!keepOpen) setOpen(false); onChange(value); } @@ -62,6 +63,15 @@ export default function CustomSelect({ options, placeholder, onChange }: Props) {opt.label} ))} + {keepOpen && ( + + )} )} diff --git a/components/ObjektSelector.tsx b/components/ObjektSelector.tsx index 6c1dfe0..6c5e622 100644 --- a/components/ObjektSelector.tsx +++ b/components/ObjektSelector.tsx @@ -25,10 +25,6 @@ export default function ObjektSelector({ selected, onChange }: Props) { const available = all.filter((o) => !selectedNames.has(o.Name.toLowerCase())); function add(value: string) { - if (value === 'neu') { - setShowNewInput(true); - return; - } const obj = all.find((o) => o.ID === parseInt(value)); if (obj && !selectedNames.has(obj.Name.toLowerCase())) { onChange([...selected, { ID: obj.ID, Name: obj.Name }]); @@ -47,11 +43,6 @@ export default function ObjektSelector({ selected, onChange }: Props) { onChange(selected.filter((o) => o.Name !== name)); } - const options = [ - { value: 'neu', label: '— Neues Objekt eingeben —' }, - ...available.map((o) => ({ value: String(o.ID), label: o.Name })), - ]; - return (
@@ -73,11 +64,25 @@ export default function ObjektSelector({ selected, onChange }: Props) { ))}
- +
+ {available.length > 0 && ( +
+ ({ value: String(o.ID), label: o.Name }))} + onChange={add} + keepOpen + /> +
+ )} + +
{showNewInput && (
@@ -88,6 +93,7 @@ export default function ObjektSelector({ selected, onChange }: Props) { onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }} placeholder="Objektname eingeben" className="flex-1 px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none" + autoFocus />
)}