To note, this is just temporary CSS added from the Ariakit example.

Our current CustomSelectControl expects an object to be returned via the onChange event:

Which is managed by useSelect ; part of the package downshift .

In Ariakit, setValue appears to be what we'd use in lieu of useSelect , but value / setValue expect a string (or an array of strings for multi-select).

It appears that the object passed to onSelectItemChange has the following structure:

 {
   selectedItem : "Curium" ,
   type : "__item_click__" ,
   highlightedIndex : - one ,
   isOpen : false ,
   inputValue : "" ,
 }

I'm not sure if all the elements in this structure are part of the public API. The type value, in particular, seems obscure. I'm also unsure about the meaning of highlightedIndex , as it always appears to be -1 .

Regardless, everything except for type can be readily accessed from within the setValue callback. You can use store.getState() in this context as well:

 const  store  =  useSelectStore ( {
   async  setValue ( selectedItem )  {
     if  ( ! onChange )  return ;
     // Executes the logic in a microtask after the popup is closed.  This might not be necessary.
     // This is simply to ensure the isOpen state matches that in Downshift.
     await  Promise . resolve ( ) ;
     const  state  =  store . getState ( ) ;
     const  changeObject  =  { selectedItem ,
       type : "__item_click__" ,
       highlightedIndex : state . renderedItems . findIndex ( ( item )  =>  item . value  ===  selectedItem ) ,
       isOpen : state . open ,
       inputValue : "" ,
     } ;
     onChange ( changeObject ) ;
   } ,
 } ) ;

Thank you for this! We finally have gotten a chance to try this out. 🙂