Merge pull request #51 from i-like-robots/bugfix/should-expand-collapse-prev-value

[Bugfix] Allow overriding value passed to expand/collapse callbacks

Author: i-like-robots

readme.md

@@ -15,7 +15,7 @@ React Tag Autocomplete is a simple, accessible, tagging component ready to drop
   - [Styling](#styling)
 - [Development](#development)
 
-_Please note:_ This repository is for v7 and above. To view the previous versions of React Tag Autocomplete see the [old repository](https://github.com/i-like-robots/react-tags). If you're upgrading to v7 from v6 please refer to [the migration guide](migration-guide.md)
+_Please note:_ This repository is for v7 and above. To view the previous versions of the `react-tag-autocomplete` package see the [old repository](https://github.com/i-like-robots/react-tags). If you're upgrading to v7 from v6 please refer to [the migration guide](migration-guide.md)
 
 ## Installation
 

src/hooks/useInput.ts

@@ -1,8 +1,8 @@
+import type React from 'react'
 import { useContext, useMemo } from 'react'
 import { KeyNames, VoidFn } from '../constants'
 import { GlobalContext } from '../contexts'
 import { inputId, isCaretAtEnd, isCaretAtStart, labelId, listBoxId, optionId } from '../lib'
-import type React from 'react'
 
 export type UseInputArgs = {
   allowBackspace: boolean
@@ -35,7 +35,7 @@ export function useInput({
       managerRef.current.updateInputValue(value)
 
       if (document.activeElement === inputRef.current) {
-        managerRef.current.listBoxExpand()
+        managerRef.current.listBoxExpand(value)
       }
     }
 

src/hooks/useManager.ts

@@ -17,8 +17,8 @@ import type {
 } from '../sharedTypes'
 
 export type ManagerAPI = {
-  listBoxCollapse(): void
-  listBoxExpand(): void
+  listBoxCollapse(value?: string): void
+  listBoxExpand(value?: string): void
   updateActiveIndex(index: number): void
   updateInputValue(value: string): void
   selectTag(tag?: Tag): void
@@ -92,7 +92,7 @@ export function useManager({
     if (value) {
       if (allowNew) {
         opts.push({
-          disabled: typeof onValidate === 'function' ? !onValidate(value) : false,
+          disabled: onValidate ? !onValidate(value) : false,
           label: newOptionText,
           value: NewOptionValue,
         })
@@ -129,19 +129,19 @@ export function useManager({
   }
 
   const api: ManagerAPI = {
-    listBoxCollapse() {
-      const shouldCollapse = isExpanded && (onShouldCollapse?.(state.value) ?? true)
+    listBoxCollapse(value?: string) {
+      if (!isExpanded) return
 
-      if (shouldCollapse) {
+      if (onShouldCollapse ? onShouldCollapse(value ?? state.value) : true) {
         setIsExpanded(false)
         setLastActiveOption(null)
         onCollapse?.()
       }
     },
-    listBoxExpand() {
-      const shouldExpand = !isExpanded && (onShouldExpand?.(state.value) ?? true)
+    listBoxExpand(value?: string) {
+      if (isExpanded) return
 
-      if (shouldExpand) {
+      if (onShouldExpand ? onShouldExpand(value ?? state.value) : true) {
         setIsExpanded(true)
         setLastActiveOption(options[activeIndex])
         onExpand?.()