Merge pull request #8 from nilooy/hotfix/autocomplete-input-events

🐛 Fix autocomplete events
nilooy · Jul 3, 2022 · 051b0f2 · 051b0f2
2 parents 1b90569 + e866ad5
commit 051b0f2
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 71 deletions.
diff --git a/scripts/prepare.ts b/scripts/prepare.ts
@@ -10,8 +10,6 @@ import { r, port, isDev, log, isFirefoxInArg } from './utils'
 async function stubIndexHtml() {
  const views = ['options', 'popup']
 
- console.log('here')
-
  for (const view of views) {
   await fs.ensureDir(r(`extension/dist/${view}`))
   let data = await fs.readFile(r(`views/${view}/index.html`), 'utf-8')

diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
@@ -7,7 +7,7 @@ import { Shortcuts } from '../shortcuts'
 const style: { default: string; disabled: string; label: string } = {
  label: `text-gray-700`,
  disabled: `cursor-not-allowed`,
- default: `input input-bordered w-[600px] shadow-lg`,
+ default: `input input-bordered min-w-[600px] w-full shadow-lg`,
 }
 
 export const Autocomplete: FunctionComponent = () => {
@@ -20,6 +20,7 @@ export const Autocomplete: FunctionComponent = () => {
   onKeyDown,
   value,
   onSuggestionClick,
+  onMouseover,
  } = useAutocomplete()
 
  const { mainCommand } = useCommand()
@@ -37,9 +38,11 @@ export const Autocomplete: FunctionComponent = () => {
      name="search"
      placeholder={`Search `}
     />
-    <p className="absolute right-2 top-2 text-gray-500">
-     <Shortcuts command={mainCommand} />
-    </p>
+    {mainCommand && !value && (
+     <p className="absolute right-2 top-2 text-gray-500">
+      <Shortcuts size="sm" command={mainCommand} />
+     </p>
+    )}
    </div>
    <Suggestions
     {...{
@@ -49,7 +52,7 @@ export const Autocomplete: FunctionComponent = () => {
      value,
      onSuggestionClick,
      suggestions,
-     onKeyDown,
+     onMouseover,
     }}
    />
   </div>

diff --git a/src/components/autocomplete/suggestions-item.tsx b/src/components/autocomplete/suggestions-item.tsx
@@ -8,14 +8,27 @@ export const listItemType: {
   <>
    <span>{suggestion.title}</span> {': '}
    <br />
-   <span className="text-gray-400">{suggestion.url}</span>
+   <span className="text-gray-400">
+    {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+    {/*@ts-ignore*/}
+    {suggestion?.url?.length >= 90
+     ? `${suggestion.url?.substring(0, 90)}...`
+     : suggestion.url}
+   </span>
   </>
  ),
  history: ({ suggestion }) => (
   <>
    <span>{suggestion.title}</span> {': '}
    <br />
    <span className="text-gray-400">{suggestion.url}</span>
+   <span className="text-gray-400">
+    {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+    {/*@ts-ignore*/}
+    {suggestion?.url?.length >= 90
+     ? `${suggestion.url?.substring(0, 90)}...`
+     : suggestion.url}
+   </span>
   </>
  ),
  key: ({ suggestion }) => (
@@ -27,20 +40,35 @@ export const listItemType: {
 }
 
 export const searchHelperText = {
- bookmark: (_: any, value: string) => (
+ bookmark: (value: string) => (
   <>
    <span className="text-green-500">@Bookmarks Search </span>
 
-   {` ${value ? value.substring(1) : ''}`}
+   {` ${value ? value.substring(1, 35) : ''}`}
+   {value?.length > 35 ? '...' : ''}
   </>
  ),
- history: (_: any, value: string) => (
-  <>
+ history: (value: string) => (
+  <span>
    <span className="text-green-400">#History Search </span>
 
-   {` ${value ? value.substring(1) : ''}`}
-  </>
+   {` ${value ? value.substring(1, 35) : ''}`}
+   {value?.length > 35 ? '...' : ''}
+  </span>
  ),
- key: (showSearchMessageUrl: any, value: string) =>
-  !!showSearchMessageUrl && `${value} Search on ${showSearchMessageUrl}`,
+}
+
+export const searchHelperQueryString = (
+ showSearchMessageUrl: any,
+ value: string,
+) => {
+ return (
+  !!showSearchMessageUrl && (
+   <>
+    <span className="text-green-500">Search on</span>{' '}
+    <span>{showSearchMessageUrl}</span>: {value.substring(0, 35)}
+    {value?.length > 35 ? '...' : ''}
+   </>
+  )
+ )
 }
diff --git a/src/components/autocomplete/suggestions.tsx b/src/components/autocomplete/suggestions.tsx
@@ -2,13 +2,17 @@ import { DEFAULT_VALUES } from './search-handler'
 import browser from 'webextension-polyfill'
 import { FunctionComponent } from 'preact'
 import { ISuperKeyOptional } from '../../types'
-import { listItemType, searchHelperText } from './suggestions-item'
+import {
+ listItemType,
+ searchHelperQueryString,
+ searchHelperText,
+} from './suggestions-item'
 import { getSearchType } from './helpers'
 
 const style = {
  activeItem: 'bg-gray-800 text-white',
  item: `px-4 py-3 focus text-sm text-gray-200 cursor-pointer hover:bg-gray-600`,
- list: `shadow-xl top-full left-0 right-0 border w-auto md:max-w-full overflow-y-auto max-h-80 mt-2 p-3 z-20`,
+ list: `shadow-xl top-full left-0 right-0 border w-auto md:max-w-full overflow-y-auto max-h-80 p-3 z-20`,
 }
 
 export interface ISuggestionsProps {
@@ -18,7 +22,7 @@ export interface ISuggestionsProps {
  showSuggestions: boolean
  value: string
  onSuggestionClick: (keyItem: object | string) => void
- onKeyDown: any
+ onMouseover?: any
 }
 
 const Suggestions: FunctionComponent<ISuggestionsProps> = ({
@@ -28,78 +32,83 @@ const Suggestions: FunctionComponent<ISuggestionsProps> = ({
  showSuggestions,
  value,
  onSuggestionClick,
- onKeyDown,
+ onMouseover,
 }) => {
  if (!showSuggestions || !value) return null
 
  const keyFromValue = value.split(DEFAULT_VALUES.separator)?.[0]
  const keyToFind = suggestions.find(item => item?.key === keyFromValue)
  const searchValue = keyToFind
   ? value.replace(`${keyToFind.key}${DEFAULT_VALUES.separator}`, '')
-  : ''
+  : value
 
  // No sub query found and matched with key with space, can trigger search query
- const showSearchMessageUrl: any =
-  !filteredSuggestions.length && keyToFind?.queryUrl && keyToFind?.url
+ const showSearchMessageUrl: '' | undefined | string =
+  keyToFind?.queryUrl && keyToFind?.url
 
  const searchType = getSearchType(value)
 
- const helperText = searchHelperText[searchType]?.(showSearchMessageUrl, value)
+ const helperText =
+  searchType !== 'key' && searchHelperText[searchType]?.(value)
+
+ const helperTextQueryString = searchHelperQueryString(
+  showSearchMessageUrl,
+  searchValue,
+ )
 
  return (
   <div>
-   {showSearchMessageUrl ? (
-    <div className="text-sm text-gray-500 p-4">
-     <span className="p-2 pt-10 text-gray-500 ">
-      <span className="text-gray-300">
-       {searchValue.substring(0, 35)}
-       {searchValue?.length > 35 ? '...' : ''}
-      </span>{' '}
-      Search on {showSearchMessageUrl}
-     </span>
+   {!!helperText && (
+    <div
+     className={`pointer-events-none p-1 bg-gray-800`}
+     onClick={() => onSuggestionClick(value)}
+    >
+     {helperText}
     </div>
-   ) : (
-    ''
    )}
-   {filteredSuggestions.length ? (
-    <ul className={style.list}>
-     {!!helperText && (
-      <li
-       className={
-        activeSuggestion === 0
-         ? `${style.item} ${style.activeItem}`
-         : style.item
-       }
-       onClick={() => onSuggestionClick(value)}
-      >
-       {helperText}
-      </li>
-     )}
-     {filteredSuggestions.map((suggestion, i) => {
-      let className
-      const index = i + 1
+   {filteredSuggestions.length || !!showSearchMessageUrl ? (
+    <>
+     <ul className={style.list}>
+      {!!helperTextQueryString && (
+       <li
+        className={
+         activeSuggestion === 0
+          ? `${style.item} ${style.activeItem}`
+          : style.item
+        }
+        onMouseOver={() => onMouseover(0)}
+        onClick={() => onSuggestionClick(value)}
+       >
+        {helperTextQueryString}
+       </li>
+      )}
+      {filteredSuggestions.map((suggestion, i) => {
+       let className
+       const index = i + 1
 
-      if (index === activeSuggestion) {
-       className = `${style.item} ${style.activeItem}`
-      }
+       if (index === activeSuggestion) {
+        className = `${style.item} ${style.activeItem}`
+       }
 
-      if (index !== activeSuggestion) {
-       className = style.item
-      }
+       if (index !== activeSuggestion) {
+        className = style.item
+       }
 
-      const ItemByType = listItemType[suggestion.type || 'key'] || <></>
+       const ItemByType = listItemType[suggestion.type || 'key'] || <></>
 
-      return (
-       <li
-        className={className}
-        key={suggestion.key}
-        onClick={() => onSuggestionClick(suggestion)}
-       >
-        <ItemByType suggestion={suggestion} />
-       </li>
-      )
-     })}
-    </ul>
+       return (
+        <li
+         className={className}
+         key={suggestion.key}
+         onClick={() => onSuggestionClick(suggestion)}
+         onMouseOver={() => onMouseover(index)}
+        >
+         <ItemByType suggestion={suggestion} />
+        </li>
+       )
+      })}
+     </ul>
+    </>
    ) : (
     <div className="text-sm text-gray-500 p-4">
      <em>No {searchType === 'key' ? 'suggestion' : searchType} available! </em>

diff --git a/src/components/autocomplete/use-autocomplete.tsx b/src/components/autocomplete/use-autocomplete.tsx
@@ -168,7 +168,16 @@ export const useAutocomplete = () => {
   const keyCode: string = e.code
   const { value } = e.target as HTMLInputElement
 
-  keyBoardEvents[keyCode]?.(value)
+  const keyBoardEvent = keyBoardEvents[keyCode]
+
+  if (keyBoardEvent) {
+   e?.preventDefault()
+   keyBoardEvent?.(value)
+  }
+ }
+
+ const onMouseover = (index: number) => {
+  setActiveSuggestion(index)
  }
 
  return {
@@ -180,5 +189,6 @@ export const useAutocomplete = () => {
   onKeyDown,
   onSuggestionClick,
   value,
+  onMouseover,
  }
 }