feat: reset active item when query has changed

Also: do not reset query when selecting custom level

Author: guansss

src/components/LevelSelect.tsx

@@ -1,11 +1,12 @@
 import { Button, Classes, MenuDivider, MenuItem } from '@blueprintjs/core'
+import { getCreateNewItem } from '@blueprintjs/select'
 
 import clsx from 'clsx'
 import Fuse from 'fuse.js'
-import { FC, useMemo } from 'react'
+import { FC, useEffect, useMemo, useState } from 'react'
 
 import { useLevels } from '../apis/level'
-import { createCustomLevel, isHardMode } from '../models/level'
+import { createCustomLevel, isCustomLevel, isHardMode } from '../models/level'
 import { Level } from '../models/operation'
 import { useDebouncedQuery } from '../utils/useDebouncedQuery'
 import { Select } from './Select'
@@ -40,7 +41,17 @@ export const LevelSelect: FC<LevelSelectProps> = ({
   )
 
   const { query, debouncedQuery, updateQuery, onOptionMouseDown } =
-    useDebouncedQuery()
+    useDebouncedQuery({
+      onDebouncedQueryChange: (value) => {
+        if (value !== debouncedQuery) {
+          // 清空 activeItem，之后会自动设置为第一项
+          setActiveItem(null)
+        }
+      },
+    })
+  const [activeItem, setActiveItem] = useState<Level | 'createNewItem' | null>(
+    null,
+  )
 
   const selectedLevel = useMemo(() => {
     const level = levels.find((el) => el.stageId === value)
@@ -103,10 +114,26 @@ export const LevelSelect: FC<LevelSelectProps> = ({
       : levels
   }, [debouncedQuery, selectedLevel, levels, fuse])
 
+  useEffect(() => {
+    if (!selectedLevel) {
+      setActiveItem(null)
+    } else if (isCustomLevel(selectedLevel)) {
+      setActiveItem('createNewItem')
+    } else {
+      setActiveItem(selectedLevel)
+    }
+  }, [selectedLevel])
+
   return (
     <Select<Level>
       items={levels}
       itemListPredicate={() => filteredLevels}
+      activeItem={
+        activeItem === 'createNewItem' ? getCreateNewItem() : activeItem
+      }
+      onActiveItemChange={(item, isCreateNewItem) => {
+        setActiveItem(isCreateNewItem ? 'createNewItem' : item)
+      }}
       query={query}
       onQueryChange={(query) => updateQuery(query, false)}
       onReset={() => onChange('')}
@@ -132,19 +159,22 @@ export const LevelSelect: FC<LevelSelectProps> = ({
       }
       selectedItem={selectedLevel}
       onItemSelect={(level) => {
-        // 重置 query 以显示同类关卡
-        updateQuery('', true)
+        if (!isCustomLevel(level)) {
+          // 重置 query 以显示同类关卡
+          updateQuery('', true)
+        }
         onChange(level.stageId)
       }}
       createNewItemFromQuery={(query) => createCustomLevel(query)}
       createNewItemRenderer={(query, active, handleClick) => (
         <MenuItem
           key="create-new-item"
           roleStructure="listoption"
-          text={`使用自定义关卡名 "${query}"`}
+          className={clsx(active && Classes.ACTIVE)}
+          text={`直接搜索关卡 "${query}"`}
           icon="text-highlight"
           onClick={handleClick}
-          active={active}
+          selected={selectedLevel && isCustomLevel(selectedLevel)}
         />
       )}
       inputProps={{

src/components/Select.tsx

@@ -1,5 +1,10 @@
 import { Button, ButtonProps, Label } from '@blueprintjs/core'
-import { Select2, Select2Props } from '@blueprintjs/select'
+import {
+  QueryList,
+  Select2,
+  Select2Props,
+  isCreateNewItem,
+} from '@blueprintjs/select'
 
 import clsx from 'clsx'
 
@@ -32,6 +37,8 @@ export const Select = <T,>({
           ),
         }}
         {...props}
+        // 传给 QueryList，给下面的补丁用
+        {...{ _parentType: 'Select' }}
       />
       {canReset && (
         <Button
@@ -50,3 +57,54 @@ export const Select = <T,>({
     </Label>
   )
 }
+
+// 修复 BP 的远古 bug：https://github.com/palantir/blueprint/issues/3751
+// 补丁只对 Select 组件启用，因为不知道对 Suggest 和 MultiSelect 是否有效，先不管了
+
+const originalSetQuery =
+  (QueryList.prototype.setQuery as any)._original ??
+  QueryList.prototype.setQuery
+QueryList.prototype.setQuery = function (...args) {
+  ;(this as any)._isCallingSetQuery = true
+  originalSetQuery.apply(this, args)
+  ;(this as any)._isCallingSetQuery = false
+}
+;(QueryList.prototype.setQuery as any)._original = originalSetQuery
+
+const originalGetActiveIndex =
+  (QueryList.prototype['getActiveIndex'] as any)._original ??
+  QueryList.prototype['getActiveIndex']
+QueryList.prototype['getActiveIndex'] = function (items) {
+  if (
+    this.props['_parentType'] === 'Select' &&
+    (this as any)._isCallingSetQuery
+  ) {
+    const activeItem =
+      this.props.activeItem === undefined
+        ? this.state.activeItem
+        : this.props.activeItem
+
+    if (isCreateNewItem(activeItem)) {
+      // bug 1：如果 activeItem 是 createNewItem，QueryList 会直接将 activeItem 刷新为第一个 item，
+      // 为了阻止这种行为，这里返回 0 以绕过 activeIndex < 0 的判断：https://github.com/palantir/blueprint/blob/e365c08b2f133ad102de8cdf687b9609e824d96c/packages/select/src/components/query-list/queryList.tsx#L328
+      return 0
+    }
+
+    return originalGetActiveIndex.call(
+      {
+        props: this.props,
+        state: {
+          ...this.state,
+
+          // bug 2：QueryList 在 setState({ activeItem: props.activeItem }) 之后并未等待 state 更新就直接读取 state.activeItem，
+          // 导致 activeItem 仍然是旧值，所以这里直接使用 props.activeItem 来覆盖
+          activeItem,
+        },
+      },
+      items,
+    )
+  }
+  return originalGetActiveIndex.call(this, items)
+}
+;(QueryList.prototype['getActiveIndex'] as any)._original =
+  originalGetActiveIndex