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

Can't type in TextField component #44

Closed
tomblanchard opened this issue May 4, 2017 · 11 comments
Closed

Can't type in TextField component #44

tomblanchard opened this issue May 4, 2017 · 11 comments

Comments

@tomblanchard
Copy link

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

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

Fixed in the live version of the style guide.

@tomblanchard
Copy link
Author

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

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

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

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

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

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

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

@NikhilDevop
Copy link

NikhilDevop commented Nov 5, 2018

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

`<ScanInputContainer

            {...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
Copy link
Contributor

tmlayton commented Nov 5, 2018

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 😄

@Shopify Shopify locked as resolved and limited conversation to collaborators Nov 5, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants