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

Add support for reverting the value of a controlled input or select #68

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

zaygraveyard
Copy link
Contributor

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.

None yet

1 participant