Polaris-react: Can't type in TextField component

[tomblanchard]

Issue summary

The <input type="text" /> element the TextField component renders are unable to be typed in.

Expected behavior

The <input type="text" /> element the TextField component renders should be able to be typed in.

Actual behavior

All keypresses get ignored.

Steps to Reproduce the Problem

1. Go here
2. Scroll to the demo section and try and type in the text box
3. Nothing happens

Specifications

• Polaris version: 1.0.2
• React version: 15.5.4
• Browser: Chrome
• Device: Macbook Pro
• Operating System: macOS Sierra

[lemonmade]

Hey @tomblanchard, thanks for the issue. This is caused by the same thing as #24 and #27. We have a fix internally that we are just fine-tuning, should be out in a couple of days. I will close this when it ships.

[lemonmade]

Fixed in the live version of the style guide.

[tomblanchard]

Hey @lemonmade

I'm still having this issue in 1.0.3; was this fix only made to the style guide, or the repo itself?

[lemonmade]

Hi @tomblanchard, sorry, I think I misunderstood your original issue. This was indeed addressed in the styleguide, but there are no plans to change how the default field actually works. In most cases for our components, we don't allow them to be used without manually setting the relevant props. We made this decision because, in almost all cases, you end up needing the value of a text field (or other input) anyways, and there is no way to access it cleanly if you allow the input update automatically. So, you would always use a field in combination with state like so:

// NOTE: this example assumes the use of a compiler that understands classes,
// import statements, property initializers, arrow functions, etc

import React from 'react';
import {TextField} from '@shopify/polaris';

class MyComponent extends React.Component {
  state = {valueOne: '', valueTwo: ''};

  render() {
    return (
      <div>
        <TextField value={this.state.valueOne} onChange={(newValue) => this.setState({valueOne: newValue})} />
        <TextField value={this.state.valueTwo} onChange={(newValue) => this.setState({valueTwo: newValue})} />
      </div>
    );
  }
}

What you lose in brevity you make up for in clarity (it is always obvious what the value is and how it is updated). The React docs discuss this topic in depth here: https://facebook.github.io/react/docs/forms.html

Hope that helps!

[tomblanchard]

Hey @lemonmade

Ah, I see! Sorry, I'm pretty much learning React for the first time whilst playing around with Polaris, thanks for taking the time to get back to me in such detail. :)

[lemonmade]

No problem, Tom! We all start in the same place so it's my pleasure to be able to point you in the right direction

[Cma-Rawal]

hey @lemonmade
Just a small doubt around the above example with multiple Textfields. I was trying to reuse a single method to set the state like below, but every time the input value gets cleared. Can you help me point out, what possibly am i doing wrong?

import React from 'react';
import {TextField} from '@shopify/polaris';

class MyComponent extends React.Component {
  state = {valueOne: '', valueTwo: ''};

  render() {
    return (
      <div>
        <TextField value={this.state.valueOne} onChange={this.handleChangeValue.bind(this, "valueOne")} />
        <TextField value={this.state.valueTwo} onChange={this.handleChangeValue.bind(this, "valueTwo")} />
      </div>
    );
  }

handleChangeValue(key, value){
     this.setState((value) => {{key : value}});
}
}

[tmlayton]

Hi @Cma-Rawal, that is close! The issue in your example is key needs to be computed as it is being passed as a string (e.g. "valueOne" or "valueTwo"). This is done by using bracket notation (supported as of ES2015):

handleChange(key, value) {
  this.setState({[key]: value});
}

Notice the [key] which is the same as ["valueOne"] or ["valueTwo"]. When using key without brackets, value is being assigned to a key named "key". That would result in this.state.key being equal to value.

[Cma-Rawal]

My bad!!
Thanks so much @tmlayton
Things worked now

[NikhilDevop]

Even after I added the key value to the onChangeText the TextInput clears itself.

`

            {...props}

            textInputProps={{

                style: {height: 40},

                label: setting.name,

                placeholder: setting.placeholder,

                value: setting.value,

                onChangeText: props.onChangeText ? partial(props.onChangeText, setting.key) : () => null

            }}

            key={setting.key}

/>`

`onChangeText = (input: string, text: string) => {

    this.setState({ [input]: text });


};

`

[tmlayton]

Hi @NikhilDevop, thanks for reaching out. This issue is resolved and I would suggest opening a new issue with a bit more context than the above comment. From first glance, this looks like an issue with the implementation. You can also reach out in our Shopify Partners Slack channel for help from others in the community 😄