Use on:input

frontend/src/components/PanelDropdown.svelte

@@ -1,7 +1,7 @@
 <label class="form-label">{label}</label>
 
 <WrappedSelect placeholder="Select panel..." items={panels} optionIdentifier="panel_id" nameMapper={labelMapper}
-               bind:selectedValue={selectedRaw} on:change={update} on:clear={handleClear} {isMulti} {isSearchable} />
+               bind:selectedValue={selectedRaw} on:input={update} on:clear={handleClear} {isMulti} {isSearchable} />
 
 <script>
     import {onMount} from "svelte";

frontend/src/components/WrappedSelect.svelte

@@ -1,6 +1,7 @@
 <Select {items}
         bind:value={selectedValue}
         on:change
+        on:input
         on:clear
         searchable={searchable}
         clearable={isClearable}

frontend/src/components/manage/PanelCreationForm.svelte

@@ -8,7 +8,7 @@
                     <div class="col-1">
                         <WrappedSelect items={mentionItems}
                                        bind:selectedValue={selectedMentions}
-                                       on:change={updateMentions}
+                                       on:input={updateMentions}
                                        optionIdentifier="id"
                                        nameMapper={mentionNameMapper}
                                        placeholder="Select roles..."
@@ -19,7 +19,7 @@
                     <label class="form-label">Support Teams</label>
                     <WrappedSelect items={teamsWithDefault}
                             bind:selectedValue={selectedTeams}
-                            on:change={updateTeams}
+                            on:input={updateTeams}
                             optionIdentifier="id"
                             nameMapper={nameMapper}
                             placeholder="Select teams..."
@@ -129,7 +129,7 @@
                                         optionIdentifier="id"
                                         nameMapper={emojiNameMapper}
                                         placeholderAlwaysShow={true}
-                                        on:change={handleCustomEmojiChange} />
+                                        on:input={handleCustomEmojiChange} />
                             </div>
                         {:else}
                             <EmojiInput col1=true bind:value={data.emote}/>

frontend/src/views/Teams.svelte

@@ -23,7 +23,7 @@
               <div class="col-1">
                 <WrappedSelect isSearchable={false} isClearable={false} optionIdentifier="id" items={teams} placeholder="Select a team..."
                         bind:selectedValue={activeTeam} nameMapper={labelMapper}
-                        on:change={updateActiveTeam}/>
+                        on:input={updateActiveTeam}/>
               </div>
             </div>