Removing borderTopWidth does not work

Do you want to request a feature or report a bug? I want to report a bug.

What is the current behavior?

export default class App extends React.Component {
  state = {
    toggled: true,
    style: {
      border: "10px solid black"
    }
  };
  handleClick = () => {
    console.log("clicked");
    const style = { ...this.state.style };
    if (this.state.toggled) {
      style.borderTopWidth = 0;
    } else {
      delete style.borderTopWidth; // BUG: removing borderTopWidth does not work
    }
    this.setState({
      style,
      toggled: !this.state.toggled
    });
  };
  render() {
    const style = this.state.style;
    return (
      <div className="App" style={style}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.handleClick}>button</button>
      </div>
    );
  }
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below: https://codesandbox.io/s/34m3njok6p What is the expected behavior? Top border should be set back to 10px after deleting borderTopWidth.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.5.2 Mac Sierra 10.12.6 Version 69.0.3497.100 (Official Build)

[aweary]

This looks like the native behavior for setting/overriding border style values.

If you use the border shorthand, and then override it by setting a more specific value (like borderTopWidth) it expands the shorthand and explicitly uses each border property. Then when you try and override it again, it doesn’t work because the properties have already been expanded.

I’m sure this is defined somewhere in the spec, and I’m not sure if there’s anything React can do here to easily fix this.

[picodoth]

@aweary Thanks for your response, closing this issue then!