Add Menu action allowing it to be used as AutoSuggest (#2456)

MovePickerPopover uses a newly added 'onExpand' callback from 'Menu' to
use it as AutoSuggest. When a user presses 'Tab' or 'ArrowRight' on a
highlighted folder, its name is plugged into the search field. This way
it is much easier to correctly complete long folder hierarchies.

Co-authored-by: Dzmitry Kanunnikau <dzmitry@kanunnikau.online>

app/internal_packages/category-picker/lib/move-picker-popover.tsx

@@ -189,6 +189,10 @@ export default class MovePickerPopover extends Component<
     }
   };
 
+  _onCompleteAutosuggest = item => {
+    this.setState(this._recalculateState(this.props, { searchValue: item.displayName }));
+  };
+
   _onSearchValueChange = event => {
     this.setState(this._recalculateState(this.props, { searchValue: event.target.value }));
   };
@@ -261,6 +265,7 @@ export default class MovePickerPopover extends Component<
           itemKey={item => item.id}
           itemContent={this._renderItem}
           onSelect={this._onSelectCategory}
+          onExpand={this._onCompleteAutosuggest}
           onEscape={this._onEscape}
           defaultSelectedIndex={this.state.searchValue === '' ? -1 : 0}
         />

app/src/components/menu.tsx

@@ -27,6 +27,7 @@ export interface MenuProps extends HTMLProps<any> {
   itemChecked?: (...args: any[]) => any;
   items: any[];
   onSelect: (item: any) => any;
+  onExpand: (item: any) => any;
   onEscape?: (...args: any[]) => any;
   defaultSelectedIndex?: number;
 }
@@ -175,6 +176,9 @@ export class Menu extends React.Component<MenuProps, MenuState> {
      - `onSelect` A {Function} called with the selected item when the user clicks
        an item in the menu or confirms their selection with the Enter key.
 
+     - `onExpand` A {Function} called with the selected item when the user presses
+       Tab or right arrow.
+
      - `onEscape` A {Function} called when a user presses escape in the input.
 
      - `defaultSelectedIndex` The index of the item first selected if there
@@ -195,6 +199,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
 
     onSelect: PropTypes.func.isRequired,
 
+    onExpand: PropTypes.func
     onEscape: PropTypes.func,
 
     defaultSelectedIndex: PropTypes.number,
@@ -297,6 +302,12 @@ export class Menu extends React.Component<MenuProps, MenuState> {
     event.stopPropagation();
     if (['Enter', 'Return'].includes(event.key)) {
       this._onEnter();
+    } else {
+      if (this.props.onExpand !== undefined && (event.key === 'Tab' || event.key === 'ArrowRight')) {
+        this._onExpand();
+        event.preventDefault();
+        return;
+      }
     }
     if (event.key === 'Escape') {
       this._onEscape();
@@ -309,6 +320,13 @@ export class Menu extends React.Component<MenuProps, MenuState> {
     }
   };
 
+  _onExpand = () => {
+    const item = this.props.items[this.state.selectedIndex];
+    if (item != null) {
+      this.props.onExpand(item);
+    }
+  };
+
   _contentContainer = () => {
     const seenItemKeys = {};
 
@@ -394,6 +412,13 @@ export class Menu extends React.Component<MenuProps, MenuState> {
     }
   };
 
+  _onExpand = () => {
+    const item = this.props.items[this.state.selectedIndex];
+    if (item != null) {
+      this.props.onExpand(item);
+    }
+  };
+
   _onEscape = () => {
     this.props.onEscape();
   };