How to set the value? Is this possible?

[gcb]

Let's say I want to add items to a list (similar to the "tags" functionality)

const [newText, setNewText] = useState('');
function createItem(label :string){
   ... create item and:
   setNewText(''); // DOES NOTHING
}

return(
<AutoComplete
  value={newText}
  onChange={x => createItem(x)}
...
)

[gcb]

my extremely ugly workaround, just to make clear the intent:

const [newText, setNewText] = useState('');
function createItem(label :string){
   ... create item and:
   setNewText(''); // DOES NOTHING
+  setTimeout( 
+     function(){ 
+         document.getElementById('taginputhack').value = '';
+  }, 100);

}

return(
<AutoComplete
  value={newText}
  onChange={x => createItem(x)}
+ id='taginputhack'
...
)

[Kysluss]

Hi @gcb ,

Really sorry for the delay in responding to you on this. Since I'm not the owner of the repo, it doesn't alert me when a new issue pops up and I haven't been as diligent checking in. To accomplish what you're looking for, you can assign a ref to the AutoComplete component and then use the resetItems and removeItem method on the ref. Below is a working example. Let me know if there is anything else I can help with.

import {
  Box, 
} from "@chakra-ui/react"
import { AutoComplete, 
  AutoCompleteInput, 
  AutoCompleteList, 
  AutoCompleteItem} from '@choc-ui/chakra-autocomplete';

import React, { useState } from 'react';

const options = [
  { label: "apple", value: "one" },
  { label: "appoint", value: "two" },
  { label: "zap", value: "three" },
  { label: "cap", value: "four" },
  { label: "japan", value: "five" },
];

export default function Page() {
  const [mySelectedValues, setMySelectedValues] = useState<string[]>([]);
  const [currentValue, setCurrentValue] = useState<string>('');
  const ref = React.useRef(null);

  function createItem(label: string) {
    console.log('selected', label);
    setMySelectedValues([...mySelectedValues, label]);
    setCurrentValue('');
    ref.current?.resetItems();
    ref.current?.removeItem(label);
  }

  return (
    <Box textAlign="center" fontSize="xl" pt="30vh" w='300px' mx='auto' justifyContent='center' alignItems='center'>
      <AutoComplete
        openOnFocus
        rollNavigation
        listAllValuesOnFocus 
        value={currentValue}
        onChange={x => createItem(x)}
        restoreOnBlurIfEmpty={true}
        ref={ref}
        closeOnBlur={false}>
          <AutoCompleteInput variant="subtle" />
          <AutoCompleteList>
            {options.map(option => (
              <AutoCompleteItem
                key={`option-${option.value}`}
                value={{ title: `${option.value}` }}
                // getValue={a => a.title}
                label={option.label}
                textTransform="capitalize"
              />
            ))}
        </AutoCompleteList>
      </AutoComplete>
    </Box>
  )
}

[gcb]

Thanks so much for the reply.

I wasn't even thinking about removing the option from the suggestions yet :) but good to know there's the options for it.

What i'm struggling is with erasing the text from the input, after the user selected a suggestion and it was added to the list elsewhere.

[Kysluss]

Hi @gcb ,

No problem at all. Let me know if the above works for you. Basically the setCurrentValue, resetItems, and removeItem call is what will erase the text after the user selects something. By keeping a list of items internally using setMySelectedValues, you get to track what the user has selected while clearing the input after each selection.

[gcb]

thanks again. i'm copying you code exactly the same and setCurrentValue is not doing it for me... let me try on a clean project. It might be something wrong on how i'm bleeding the value across a few custom forward components.

[Kysluss]

@gcb No problem. I just wanted to check back in to see if you were able to get this working or if you're still having an issue.

[gcb]

@gcb No problem. I just wanted to check back in to see if you were able to get this working or if you're still having an issue.

thanks. and congrats... this was merged upstream as the combobox i think? is that so?

well, for our use case, we ended up not using this component (or the combo)

We have a plain chakra Field, attached to a <datalist>. that way the visual is not as good, but the developer ergonomics is better by just using plain value/onchange for both the field and the datalist.

[Kysluss]

@gcb The original maintainer of this project also contributes to Chakra UI, so it's possible there was some influence to get that into the core offering. Glad to see progress being made on that.

Sorry to hear you ended up not using this component or the combo box but happy to help in the future if you revisit. Is it okay if I close this issue for now?