Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

Conversation

ziadkh0
Copy link
Contributor

@ziadkh0 ziadkh0 commented Jan 31, 2018

Imagine you want a "controlled" color picker, so write the following:

class ColorPicker {
  constructor(props) {
    this.props = props;
    etch.initialize(this);
  }
  handleChange(event) {
    const value = event.target.value;

    if (value !== this.props.value) {
      // revert the value so that it stays consistent with the `props`
      // this is the part that doesn't currently work <------------------------------
      etch.update(this);

      // notify the parent of the change
      this.props.onChange(value);
    }
  }
  render() {
    return <input {...this.props} type="color" onChange={this.handleChange} />;
  }
  update(nextProps) {
    if (shallowDiffers(this.props, nextProps)) {
      this.props = nextProps;
      etch.update(this);
    }
  }
}

And imagine you want to have an instance that refuses some colors:

const picker = new ColorPicker({value: '#fff', onChange: handleChange});
document.body.appendChild(picker.element)

function handleChange(color) {
  if (color.endsWith('ff')) {
    // color must have the blue at max
    picker.update({value: color, onChange: handleChange});
  }
}

This is not currently possible because when the etch.update(this) in the handleChange is called, it calls updateProps which updates the input.value only if the new value is !== than the old one.
But in this case the new value is always === the old one.
Ref. lib/update-props.js:59

This PR solves this case for input and select type elements.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant