bind enter events as a submit to Popups

add s as key to submit a reshuffle in shuffled videos

src/elements/Popups/AddActorPopup/AddActorPopup.tsx

@@ -9,6 +9,7 @@ import {GeneralSuccess} from '../../../types/GeneralTypes';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
 import {Button} from '../../GPElements/Button';
+import {addKeyHandler, removeKeyHandler} from '../../../utils/ShortkeyHandler';
 
 interface props {
     onHide: () => void;
@@ -41,6 +42,19 @@ class AddActorPopup extends React.Component<props, state> {
 
         this.tileClickHandler = this.tileClickHandler.bind(this);
         this.filterSearch = this.filterSearch.bind(this);
+        this.parentSubmit = this.parentSubmit.bind(this);
+        this.keypress = this.keypress.bind(this);
+    }
+
+    componentWillUnmount(): void {
+        removeKeyHandler(this.keypress);
+    }
+
+    componentDidMount(): void {
+        addKeyHandler(this.keypress);
+
+        // fetch the available actors
+        this.loadActors();
     }
 
     render(): JSX.Element {
@@ -52,18 +66,13 @@ class AddActorPopup extends React.Component<props, state> {
                         className={style.newactorbutton}
                         onClick={(): void => {
                             this.setState({contentDefault: false});
-                        }}>Create new Actor</button>}>
+                        }}>Create new Actor</button>} ParentSubmit={this.parentSubmit}>
                     {this.resolvePage()}
                 </PopupBase>
             </>
         );
     }
 
-    componentDidMount(): void {
-        // fetch the available actors
-        this.loadActors();
-    }
-
     /**
      * selector for current showing popup page
      * @returns {JSX.Element}
@@ -101,15 +110,13 @@ class AddActorPopup extends React.Component<props, state> {
                                         this.setState({filter: '', filtervisible: false});
                                     }}/>
                                 </> :
-                                <Button title={<span>Filter <FontAwesomeIcon style={{
-                                    verticalAlign: 'middle',
-                                    lineHeight: '130px'
-                                }} icon={faFilter} size='1x'/></span>} color={{backgroundColor: 'cornflowerblue', color: 'white'}} onClick={(): void => {
-                                    this.setState({filtervisible: true}, () => {
-                                        // focus filterfield after state update
-                                        this.filterfield?.focus();
-                                    });
-                                }}/>
+                                <Button
+                                    title={<span>Filter <FontAwesomeIcon style={{
+                                        verticalAlign: 'middle',
+                                        lineHeight: '130px'
+                                    }} icon={faFilter} size='1x'/></span>}
+                                    color={{backgroundColor: 'cornflowerblue', color: 'white'}}
+                                    onClick={(): void => this.enableFilterField()}/>
                         }
                     </div>
                     {this.state.actors.filter(this.filterSearch).map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
@@ -120,6 +127,16 @@ class AddActorPopup extends React.Component<props, state> {
         }
     }
 
+    /**
+     * enable filterfield and focus into searchbar
+     */
+    private enableFilterField(): void {
+        this.setState({filtervisible: true}, () => {
+            // focus filterfield after state update
+            this.filterfield?.focus();
+        });
+    }
+
     /**
      * event handling for ActorTile Click
      */
@@ -155,6 +172,30 @@ class AddActorPopup extends React.Component<props, state> {
     private filterSearch(actor: ActorType): boolean {
         return actor.name.toLowerCase().includes(this.state.filter.toLowerCase());
     }
+
+    /**
+     * handle a Popupbase parent submit action
+     */
+    private parentSubmit(): void {
+        // allow submit only if one item is left in selection
+        const filteredList = this.state.actors.filter(this.filterSearch);
+
+        if (filteredList.length === 1) {
+            // simulate click if parent submit
+            this.tileClickHandler(filteredList[0]);
+        }
+    }
+
+    /**
+     * key event handling
+     * @param event keyevent
+     */
+    private keypress(event: KeyboardEvent): void {
+        // hide if escape is pressed
+        if (event.key === 'f') {
+            this.enableFilterField();
+        }
+    }
 }
 
 export default AddActorPopup;