-1

I am creating a React component which includes several input feilds. I have encountered an issue on the iPad(Safari and Chrome) and Safari browser on Mac.

I cannot type into the Input feilds.

var InputComponent = React.createClass({
    getInitialState : function(){
        return {telephone : ''}
    },
    handleChange : function(event){
        console.log(event.target.value);
    },
    render : function(){
        return( 
              <div>
                    <label>Contact tel </label>
                    <input id="telephone" onChange={this.handleChange} defaultValue={this.state.telephone}/>
              </div>
        )
    }
})

I have tried several variations on the input element itself without any luck.

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
user1724102
  • 21
  • 7
  • What are you trying to use as the value? Set the value as `value={this.state.telephone}` and update the telephone in `handleChange` using `setState`? – JEV Oct 07 '15 at 15:41
  • @Glitch100 thanks for the quick reply. I in fact updated the Code sample. Your suggestion works great .. But I'm still experiencing the issue in the browsers i mentioned above. – user1724102 Oct 07 '15 at 15:46
  • I have discovered that the issue may be related to factors other than the creation of the React component. Maybe an issue with CSS rules.. or some other library... Thanks all for your help. – user1724102 Oct 07 '15 at 16:26
  • All cool, good luck with your future react dev – JEV Oct 07 '15 at 16:27
  • I had set -webkit-user-select: none; to the entire document. – user1724102 Oct 07 '15 at 17:02
  • haha that is shameful! – JEV Oct 07 '15 at 17:03

1 Answers1

0

You need to close the update loop by setting your state in the handle change. Because react maintains its own virtual DOM, you want react to be making your DOM changes, not the standard browser. 

var InputComponent = React.createClass({
   getInitialState : function(){
       return {telephone : ''}
   },
   handleChange : function(event){
       this.setState({
           telephone: event.target.value
       })
   },
   render : function(){

       return( 
            <div>
                <label>Contact tel </label>
                <input id="telephone" onChange={this.handleChange} value={this.state.telephone}/>
            </div>
         )
   }
})

Also, I think you want to use the value prop, rather than defaultValue.

Georgemayer
  • 315
  • 4
  • 15