Fix bubbling up of events from the space picker search box while reta…

…ining the arrow navigation
WorldBrain · Jul 25, 2024 · f3ed1f8 · f3ed1f8
1 parent 72472f4
commit f3ed1f8
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 4 deletions.
diff --git a/src/custom-lists/ui/CollectionPicker/components/SearchInput.tsx b/src/custom-lists/ui/CollectionPicker/components/SearchInput.tsx
@@ -52,8 +52,11 @@ export class PickerSearchInput extends React.Component<Props, State> {
                 value={this.props.value}
                 onChange={this.onChange}
                 onKeyDown={(e) => {
-                    this.props.onKeyDown(e)
                     e.stopPropagation()
+                    this.props.onKeyDown(e)
+                }}
+                onKeyUp={(event) => {
+                    event.stopPropagation()
                 }}
                 type={'input'}
                 componentRef={this.props.searchInputRef}

diff --git a/src/custom-lists/ui/CollectionPicker/index.tsx b/src/custom-lists/ui/CollectionPicker/index.tsx
@@ -140,6 +140,7 @@ class SpacePicker extends StatefulUIElement<
     }
 
     private handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        event.stopPropagation()
         this.processEvent('keyPress', { event })
     }
 
@@ -863,7 +864,9 @@ class SpacePicker extends StatefulUIElement<
                             this.state.selectedListIds.length === 0
                         }
                         onChange={this.handleSearchInputChanged}
-                        onKeyDown={this.handleKeyPress}
+                        onKeyDown={(event) => {
+                            this.handleKeyPress(event)
+                        }}
                         value={this.state.query}
                         autoFocus={
                             this.state.listIdToShowNewChildInput ||

diff --git a/src/custom-lists/ui/CollectionPicker/logic.ts b/src/custom-lists/ui/CollectionPicker/logic.ts
@@ -538,6 +538,7 @@ export default class SpacePickerLogic extends UILogic<
         event: { event },
         previousState,
     }) => {
+        event.stopPropagation()
         if (event.key === 'Enter') {
             const isCmdKey = event.metaKey || event.ctrlKey
             await this.handleEnterKeyPress(previousState, isCmdKey)
@@ -574,8 +575,6 @@ export default class SpacePickerLogic extends UILogic<
             this.dependencies.closePicker(event)
             return
         }
-
-        event.stopPropagation()
     }
 
     openListInWebUI: EventHandler<'openListInWebUI'> = async ({ event }) => {

diff --git a/src/custom-lists/ui/space-edit-menu/index.tsx b/src/custom-lists/ui/space-edit-menu/index.tsx
@@ -147,6 +147,9 @@ export default class SpaceEditMenuContainer extends StatefulUIElement<
                                         onKeyDown={
                                             this.handleNameEditInputKeyDown
                                         }
+                                        onKeyUp={(event) => {
+                                            event.stopPropagation()
+                                        }}
                                         autoFocus
                                     />
                                 </Container>

diff --git a/src/custom-lists/ui/space-email-invites/index.tsx b/src/custom-lists/ui/space-email-invites/index.tsx
@@ -126,6 +126,9 @@ export default class SpaceEmailInvites extends StatefulUIElement<
                                     : null
                             }
                             onKeyDown={this.handleAddInviteInputKeyDown}
+                            onKeyUp={(event) => {
+                                event.stopPropagation()
+                            }}
                         />
                         {this.shouldShowInviteBtn &&
                             this.state.emailInvitesCreateState !== 'running' &&