Removing borderTopWidth does not work

[picodoth]

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)

[pd4d10]

According to setValueForStyles, it equals to

// 1st render
node.style.border = "10px solid black"

// 2nd render
node.style.borderTopWidth = "0"

// 3rd render
node.style.borderTopWidth = ""

borderTopWidth is reset at 3rd render, while borderTopColor and borderTopStyle are not reset.

Change borderTopWidth to borderTop, then it works correctly.

[picodoth]

@pd4d10 thanks for your response, can you elaborate more how

node.style.borderTopWidth = ""

happens?

Also change borderTopWidth to borderTop seems not helping.

[pd4d10]

@picodoth Well, my mistake. Changing borderTopWidth to borderTop doesn't works indeed.

Seems we need to manually set it to initial value again. Try this:

import React from "react";
import ReactDOM from "react-dom";

export default class App extends React.Component {
  state = {
    toggled: true,
    style: {
      border: "10px solid black"
    }
  };
  handleClick = () => {
    const style = { ...this.state.style };
    if (this.state.toggled) {
      style.borderTopWidth = 0;
    } else {
      style.borderTopWidth = 10; // Set to 10 again
    }
    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>
    );
  }
}

[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!