inserting a new object into items

[flyfisher1952]

I'm trying to add a new object to the items array. The allowNew option doesn't work for me because my items are objects with multiple properties, not just strings. I pop up a react-bootstrap Modal dialog, enter the item data, add the item to the items array, and set the selected item.

Nothing shows up in my typeahead.

What is the best approach to do this.

--thanks, Mike

[ericgio]

Hey @flyfisher1952 can you please post some code samples?

[flyfisher1952]

Here is my github repo.

https://github.com/flyfisher1952/freefishingreports.git

I use a REST API defined in this one.

https://github.com/flyfisher1952/ffr-rest-api.git

The latest MySQL dump (including schema creation) is in the API/src/db folder. You have to create the fishing_report database before running it.

thanks.

[ericgio]

Can you please provide a minimal code sample, ideally a sandbox? Thanks.

[flyfisher1952]

Hi,

I got a codesandbox site working, at least well enough to demonstrate the problem. The REST API isn't there so It doesn't pull the data correctly, but the popup works and should still be able to add a new element to the (empty) items list for the typeahead and have it display in the typeahead. I'm not sure that the internal link works for others since this is the first time I've used codesandbox. Here is the link:

https://fqlkzu-3000.csb.app/PostReport

The link in the browser itself is:

https://codesandbox.io/p/github/flyfisher1952/freefishingreports/draft/dark-haze?workspaceId=842757f2-cac4-4a59-91ef-8e11a063a8f1&file=%2Fsrc%2Fpages%2FPostReport.js&selection=%5B%7B%22endColumn%22%3A24%2C%22endLineNumber%22%3A133%2C%22startColumn%22%3A24%2C%22startLineNumber%22%3A133%7D%5D

The "Water" typeahead is the one I'm working on. Click the plus icon and the pop-up will appear. Enter a string and click "Ok". At that point, the addWaterOk callback runs. That is where is should add the new water object to the items list and set it as the selectedWater. I've messed around with this for days now and tried a bunch of approaches. I currently think the async onSearch function is probably stepping on the list and I need to create a state variable that gets added in getWaters to the list each time it is called if the newWater object exists.

My username on codesandbox is the same as my GitHub username since I'm logging in to codesandbox with my GitHub credentials.

I really appreciate your help on this.

thanks, Mike

[ericgio]

It seems to me like the "New Water" modal is doing the same thing as allowNew, ie: allowing the user to define a name (string). You mentioned that allowNew doesn't work for you; in what way? Whether a user creates the string through a modal or using allowNew seems about the same. If you prefer the modal UX that's fine, just mentioning that it's not doing anything substantially different from a data perspective as of now.

To add the new option, you need to merge it into the options you're passing into the typeahead. This is done for you when using allowNew. As far as selecting the newly created item, it doesn't look like you're passing any values to the selected prop of your typeahead in SearchBar.js.

It also looks like you are more or less fetching the set of options at the outset and not making search queries based on user input, which is what AsyncTypeahead was designed to do. Given that, you can probably just use the more static Typeahead and pass in whatever options you initially fetched.

[flyfisher1952]

I've created a simpler project that demonstrates the issue using canned JSON data (exported from my DB) and using the Typeahead component. Here is the URL:

https://codesandbox.io/p/github/flyfisher1952/type-ahead-drop-down/master?file=README.md&workspace=%257B%2522activeFilepath%2522%253A%2522README.md%2522%252C%2522openFiles%2522%253A%255B%2522README.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clg2ewlln0015356l8a432lg4%2522%253A%257B%2522key%2522%253A%2522clg2ewlln0015356l8a432lg4%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A3000%252C%2522key%2522%253A%2522clg2exezs007h356l0n4zax0k%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522key%2522%253A%2522clg2excmh003m356lv6vy8mb2%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clg2ewlln0015356l8a432lg4%2522%252C%2522spacesOrder%2522%253A%255B%2522clg2ewlln0015356l8a432lg4%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D

My test data is:

Country -> United States
State -> Utah
new Water -> 7-mile creek (nice little stream in central Utah full of fat brookies).

The ref I use to force focus could be used to manipulate the Typeahead directly but I'd rather use your API than a kludge. Notice that after adding the new water object, the list contains it but there is no item selected in the list.

[flyfisher1952]

Also...
The new water modal is simple because the Water object is simple at this time. It will become more complex in the future. So I'm trying to get the modal/typeahead behavior to work now while it is simple. SearchBar works fine but never needs to add new items. Only the post-report page will allow adding water features and spots on those waters.

My simpler project above should reduce things to just what is needed to address the issue.

[flyfisher1952]

So I had to use a kludge via useRef. Adding the following line to the handleAddWater function did the trick.

waterTaRef.current.state.selected = [newWater];

I replaced the line that forces the typeahead to have focus since adding the new water accomplishes the typeahead's purpose. I can now increase the complexity of the water object.

thanks.

[ericgio]

Looking at your simplified project, it seems like you mostly have everything hooked up. The missing piece seems to be setting the newly created water location as the selected item once it's created.

I've tried using 'selected={[selectedWater]}', but the typeahead just displays "undefined" in the input and becomes unresponsive. If I use the 'selected={[selectedWater]}' option and don't initialize the selectedWater (or other selected variables) to an empty object '{}' then the typeahead crashes internally on a call to hasOwnProperty.

You were very close here, there were just a couple problems. The new water modal creates an object, but the typeahead expects an array of items. You also need to initialize selectedWater with an empty array. Doing all that in your simplified project seems to yield the results you're looking for:

// Initialize `selectedWater` with an empty array
const [selectedWater, setSelectedWater] = useState([]);

...

const handleAddWater = (newWater) => { // <-- `newWater` is an object here
  const newWaterList = [newWater].concat(waterList);
  setWaterList(newWaterList);
  setSelectedWater([newWater]); // <-- Set the new water as an array
};

...

<Typeahead
  ...
  options={waterList}
  onChange={handleWaterChange}
  selected={selectedWater} // <-- Set the `selected` prop
/>