Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mapping config in async typeahead doesn't work with overrideOptions #99

Open
donalmurtagh opened this issue Sep 27, 2018 · 5 comments
Open

Comments

@donalmurtagh
Copy link
Contributor

donalmurtagh commented Sep 27, 2018

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?

@donalmurtagh donalmurtagh changed the title use async typeahead to set multiple schema fields async typeahead ignores mapping config Sep 27, 2018
@donalmurtagh donalmurtagh changed the title async typeahead ignores mapping config mapping config in async typeahead doesn't work with overrideOptions Sep 27, 2018
@HaiderImran
Copy link

Any solution ?

@HaiderImran
Copy link

overrideOptions true is not working :(

@HaiderImran
Copy link

image

@ivarprudnikov
Copy link

ivarprudnikov commented Nov 19, 2019

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

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
Copy link

ivarprudnikov commented Nov 19, 2019

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants