openstatus.dev / openstatus
Openstatus www.openstatus.dev
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: missing CommandList

Maximilian Kaske 0be23c6d e8c51181

+46 -43
+46 -43
apps/web/src/components/forms/monitor/tags-multi-box.tsx
··· 23 23 CommandGroup, 24 24 CommandInput, 25 25 CommandItem, 26 + CommandList, 26 27 CommandSeparator, 27 28 Dialog, 28 29 DialogContent, ··· 64 65 } 65 66 66 67 export function TagsMultiBox({ 67 - tags: defaultTags, 68 + tags: defaultTags = [], 68 69 values, 69 70 onChange, 70 71 }: TagsMultiBoxProps) { 71 72 const inputRef = React.useRef<HTMLInputElement>(null); 72 - const [tags, setTags] = React.useState<MonitorTag[]>(defaultTags || []); 73 + const [tags, setTags] = React.useState<MonitorTag[]>(defaultTags); 73 74 const [openCombobox, setOpenCombobox] = React.useState(false); 74 75 const [openDialog, setOpenDialog] = React.useState(false); 75 76 const [inputValue, setInputValue] = React.useState<string>(""); ··· 95 96 onChange( 96 97 values?.includes(item.id) 97 98 ? values.filter((v) => v !== item.id) 98 - : [...values, item.id], 99 + : [...values, item.id] 99 100 ); 100 101 inputRef?.current?.focus(); 101 102 }; ··· 156 157 value={inputValue} 157 158 onValueChange={setInputValue} 158 159 /> 159 - <CommandGroup className="max-h-[145px] overflow-auto"> 160 - {tags.map((item) => { 161 - const isActive = values?.includes(item.id); 162 - return ( 163 - <CommandItem 164 - key={item.id} 165 - value={item.name} 166 - onSelect={() => toggle(item)} 167 - > 168 - <Check 169 - className={cn( 170 - "mr-2 h-4 w-4", 171 - isActive ? "opacity-100" : "opacity-0", 172 - )} 173 - /> 174 - <div className="flex-1">{item.name}</div> 175 - <div 176 - className="h-4 w-4 rounded-full" 177 - style={{ backgroundColor: item.color }} 178 - /> 179 - </CommandItem> 180 - ); 181 - })} 182 - <CommandItemCreate 183 - onSelect={() => create(inputValue)} 184 - {...{ inputValue, tags }} 185 - /> 186 - </CommandGroup> 187 - <CommandSeparator alwaysRender /> 188 - <CommandGroup> 189 - <CommandItem 190 - value={`:${inputValue}:`} // HACK: that way, the edit button will always be shown 191 - className="text-muted-foreground text-xs" 192 - onSelect={() => setOpenDialog(true)} 193 - > 194 - <div className={cn("mr-2 h-4 w-4")} /> 195 - <Edit2 className="mr-2 h-2.5 w-2.5" /> 196 - Edit tags 197 - </CommandItem> 198 - </CommandGroup> 160 + <CommandList> 161 + <CommandGroup className="max-h-[145px] overflow-auto"> 162 + {tags.map((item) => { 163 + const isActive = values?.includes(item.id); 164 + return ( 165 + <CommandItem 166 + key={item.id} 167 + value={item.name} 168 + onSelect={() => toggle(item)} 169 + > 170 + <Check 171 + className={cn( 172 + "mr-2 h-4 w-4", 173 + isActive ? "opacity-100" : "opacity-0" 174 + )} 175 + /> 176 + <div className="flex-1">{item.name}</div> 177 + <div 178 + className="h-4 w-4 rounded-full" 179 + style={{ backgroundColor: item.color }} 180 + /> 181 + </CommandItem> 182 + ); 183 + })} 184 + <CommandItemCreate 185 + onSelect={() => create(inputValue)} 186 + {...{ inputValue, tags }} 187 + /> 188 + </CommandGroup> 189 + <CommandSeparator alwaysRender /> 190 + <CommandGroup> 191 + <CommandItem 192 + value={`:${inputValue}:`} // HACK: that way, the edit button will always be shown 193 + className="text-muted-foreground text-xs" 194 + onSelect={() => setOpenDialog(true)} 195 + > 196 + <div className={cn("mr-2 h-4 w-4")} /> 197 + <Edit2 className="mr-2 h-2.5 w-2.5" /> 198 + Edit tags 199 + </CommandItem> 200 + </CommandGroup> 201 + </CommandList> 199 202 </Command> 200 203 </PopoverContent> 201 204 </Popover>