CODEWITHSUNDEEP
javascriptreactjsautocompletereact-redux-form
mellis481
mellis481

Reputation: 4148

Cannot wrap react-autocomplete element in react-redux-form control

I'm attempting to wrap react-autocomplete's component with a React Redux Form control, but I'm having issues. Here is what I have:

const typeaheadComponent = (props: any) => (
  <Autocomplete
    getItemValue={(item: string) => item}
    items={this.getOptions()}
    renderInput={(props: any) => (
      <input type="text" {...props} />
    )}
    renderItem={(item: string, isHighlighted: boolean) => {
      <div key={uuid.v4()}>{item}</div>;
    }}
    value={value}
    onChange={this.onChange}
    onSelect={this.onSelect}
    inputProps={{
      onKeyUp: this.onKeyPress
    }}
  />
);

return (
  <Control.text
    component={typeaheadComponent}
    mapProps={{
      value: props => props.modelValue
    }}
    model={model}
    id={model}
    value={value}
    persist
  />
);

}

When I render just the <Autocomplete> element (not wrapping it in a RRF control), it functions properly. When I wrap it in a RRF Control with the code above, though, and focus on my textbox and press a key, the RRF rrf/clearIntents action fires, but nothing else. Also, focus on the input blurs after each press of the keyboard.

I've reviewed the RRF custom controls documentation, but I'm still struggling to understand what I'm missing.

Upvotes: 1

Views: 1292

Answers (1)

Olim Saidov
Olim Saidov

Reputation: 2844

You have an error in mapProps property. According the documentation:

One important thing to keep in mind is that there is no single value for a ; rather, there are two types of values (that are equivalent, more often than not):

modelValue - the exact value of the model in the store's state viewValue - the displayed value of the model in the component's state For example, if a text control has updateOn="blur", its viewValue will represent what is being typed in the input, whereas the modelValue will represent the persisted value, once the input is blurred.

Because of this, you will want to map the viewValue to a custom control's value if you wish to externally update the value

Here is the working example of using react-autocomplete with react-redux-form:

import React from 'react';
import { Control, Form, actions } from 'react-redux-form';
import Autocomplete from 'react-autocomplete';

class UserForm extends React.Component {

  render() {
    return (
      <Form model="user">
        <label htmlFor="user.firstName">First name:</label>
        <Control.custom
          component={Autocomplete}
          model="user.firstName"
          id="user.firstName"
          controlProps={{
            getItemValue: (item) => item.label,
            items: [
              { label: 'apple' },
              { label: 'banana' },
              { label: 'pear' }
            ],
            renderItem: (item, isHighlighted) =>
              <div style={{ background: isHighlighted ? 'lightgray' : 'white' }} 
                   key={item.label}>
                {item.label}
              </div>
          }}
          mapProps={props => ({
            value: props.viewValue,
            onSelect: value => props.onChange(value),
            onChange: props.onChange,
            inputProps: {
              onBlur: props.onBlur,
              onFocus: props.onFocus,
              onKeyPress: props.onKeyPress,
            }
          })} />

        <label htmlFor="user.lastName">Last name:</label>
        <Control.text model="user.lastName" id="user.lastName" />

        <button type="submit">
          Finish registration!
        </button>
      </Form>
    );
  }
}

export default UserForm;

Working demo is here.

Upvotes: 1

Related Questions