feat(core): support onHighlight on input

The `onHighlight` source prop is now also called when editing the input and that a suggestion is selected (when `defaultHighlightedIndex` is a number). This is more aligned with the term "highlighted" and is necessary to implement UIs like a preview panel.
algolia · Sep 17, 2020 · e463933 · e463933
1 parent b3fe0f7
commit e463933
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts
@@ -126,6 +126,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
         if (props.openOnFocus) {
           onInput({
             query: '',
+            event,
             store,
             props,
             setHighlightedIndex,
@@ -149,12 +150,13 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
   const getInputProps: GetInputProps<TEvent, TMouseEvent, TKeyboardEvent> = (
     providedProps
   ) => {
-    function onFocus() {
+    function onFocus(event: TEvent) {
       // We want to trigger a query when `openOnFocus` is true
       // because the dropdown should open with the current query.
       if (props.openOnFocus || store.getState().query.length > 0) {
         onInput({
           query: store.getState().query,
+          event,
           store,
           props,
           setHighlightedIndex,
@@ -194,6 +196,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
         onInput({
           query: (((event as unknown) as Event)
             .currentTarget as HTMLInputElement).value.slice(0, maxLength),
+          event,
           store,
           props,
           setHighlightedIndex,
@@ -225,7 +228,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
           store.send('blur', null);
         }
       },
-      onClick: () => {
+      onClick: (event) => {
         // When the dropdown is closed and you click on the input while
         // the input is focused, the `onFocus` event is not triggered
         // (default browser behavior).
@@ -238,7 +241,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
             props.environment.document.activeElement &&
           !store.getState().isOpen
         ) {
-          onFocus();
+          onFocus((event as unknown) as TEvent);
         }
       },
       ...rest,
@@ -347,6 +350,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
 
         onInput({
           query: inputValue,
+          event,
           store,
           props,
           setHighlightedIndex,

diff --git a/packages/autocomplete-core/src/onInput.ts b/packages/autocomplete-core/src/onInput.ts
@@ -4,11 +4,13 @@ import {
   AutocompleteState,
   AutocompleteStore,
 } from './types';
+import { getHighlightedItem } from './utils';
 
 let lastStalledId: number | null = null;
 
 interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
   query: string;
+  event: any;
   store: AutocompleteStore<TItem>;
   props: AutocompleteOptions<TItem>;
   /**
@@ -23,6 +25,7 @@ interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
 
 export function onInput<TItem>({
   query,
+  event,
   store,
   props,
   setHighlightedIndex,
@@ -120,6 +123,29 @@ export function onInput<TItem>({
               ((query.length === 0 && props.openOnFocus) ||
                 props.shouldDropdownShow({ state: store.getState() }))
           );
+
+          const highlightedItem = getHighlightedItem({
+            state: store.getState(),
+          });
+
+          if (store.getState().highlightedIndex !== null && highlightedItem) {
+            const { item, itemValue, itemUrl, source } = highlightedItem;
+
+            source.onHighlight({
+              suggestion: item,
+              suggestionValue: itemValue,
+              suggestionUrl: itemUrl,
+              source,
+              state: store.getState(),
+              setHighlightedIndex,
+              setQuery,
+              setSuggestions,
+              setIsOpen,
+              setStatus,
+              setContext,
+              event,
+            });
+          }
         })
         .catch((error) => {
           setStatus('error');

diff --git a/packages/autocomplete-core/src/types/getters.ts b/packages/autocomplete-core/src/types/getters.ts
@@ -84,7 +84,7 @@ export type GetInputProps<TEvent, TMouseEvent, TKeyboardEvent> = (props: {
   'aria-labelledby': string;
   onChange(event: TEvent): void;
   onKeyDown(event: TKeyboardEvent): void;
-  onFocus(): void;
+  onFocus(event: TEvent): void;
   onBlur(): void;
   onClick(event: TMouseEvent): void;
 };