mapping config in async typeahead doesn't work with overrideOptions

[donalmurtagh]

I'm using the async typeahead with an API that returns data such as

[
    {"id": "1", "text": "Product 1"},
    {"id": "2", "text": "Product 2"},
    {"id": "3", "text": "Product 3"},
]

If I use the following config.

labelKey: "text",
mapping: "id",
overrideOptions: true

The id property value should be stored in the model, but it isn't (the text value is). Similarly, if I set mapping to a function, the return value of the function should be stored, but it isn't.

if overrideOptions: true is removed, the mapping works as expected.

The fundamental problem is that if overrideOptions is true, we ignore any mapping config and store the text typed by the user in the model. This implicitly assumes that the AsyncTypeaheadField field is bound to a String property of the schema, but I discovered this issue when binding it to an Object property.

Proposed Solution

Extend overrideOptions so the user can supply a function instead of just a boolean. If a function is supplied, it will be called with the text typed by the user as an argument. This would allow AsyncTypeaheadField to be bound to any type of schema property, and any transformations to be applied to the text entered by the user.

@sneu012 @mavarazy If you support this proposal, I can submit a PR?

[HaiderImran]

Any solution ?

[HaiderImran]

overrideOptions true is not working :(

[HaiderImran]

[ivarprudnikov]

as @HaiderImran shows, after setting this option to true now it throws when typing in the field 😭 An example on codesandbox:

Otherwise this is what I used to reproduce:

// package.json
{
  ...
  "dependencies": {
    "react": "16.10.2",
    "react-dom": "16.10.2",
    "react-bootstrap-typeahead": "3.1.4",
    "react-jsonschema-form": "1.8.0",
    "react-jsonschema-form-extras": "0.9.48",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start"
    ...
  }
}

// React app
import React from "react";
import { render } from "react-dom";
import Form from "react-jsonschema-form";
import { AsyncTypeaheadField } from "react-jsonschema-form-extras/lib/TypeaheadField";

let schema = {
  type: "object",
  properties: {
    user: { type: "string" }
  }
};

const uiSchema = {
  user: {
    "ui:field": "asyncTypeahead",
    asyncTypeahead: {
      url: "https://jsonplaceholder.typicode.com/users",
      minLength: 1,
      labelKey: "username",
      overrideOptions: true
    }
  }
};

const App = () => (
  <Form
    schema={schema}
    uiSchema={uiSchema}
    fields={{ asyncTypeahead: AsyncTypeaheadField }}
    onChange={data => console.log("changed", data)}
    onSubmit={data => console.log("submitted", data)}
    onError={err => console.log("errors", err)}
  />
);

render(<App />, document.getElementById("root"));

Skipping index.html file here for brevity.

[ivarprudnikov]

I've created a separate issue for that crash @HaiderImran

#137 async typeahead crashes when typing after overrideOptions is set to true