Fix reorder buttons staying active once pressed.

Author: n1k0

src/components/fields/ArrayField.js

@@ -108,6 +108,7 @@ class ArrayField extends Component {
  onReorderClick = (index, newIndex) => {
  return (event) => {
  event.preventDefault();
+ event.target.blur();
  const {items} = this.state;
  this.asyncSetState({
  items: items.map((item, i) => {
@@ -330,6 +331,7 @@ class ArrayField extends Component {
  const {SchemaField} = this.props.registry.fields;
  const {disabled, readonly} = this.props;
  const hasToolbar = removable || canMoveUp || canMoveDown;
+ const btnStyle = {flex: 1, paddingLeft: 6, paddingRight: 6, fontWeight: "bold"};
 
  return (
  <div key={index} className="array-item">
@@ -352,24 +354,24 @@ class ArrayField extends Component {
  <div className="btn-group" style={{display: "flex"}}>
  {canMoveUp || canMoveDown ?
  <button type="button" className="btn btn-default array-item-move-up"
- style={{flex: 1, paddingLeft: 6, paddingRight: 6}}
+ style={btnStyle}
  tabIndex="-1"
  disabled={disabled || readonly || !canMoveUp}
  onClick={this.onReorderClick(index, index - 1)}>⬆</button>
  : null}
  {canMoveUp || canMoveDown ?
  <button type="button" className="btn btn-default array-item-move-down"
- style={{flex: 1, paddingLeft: 6, paddingRight: 6}}
+ style={btnStyle}
  tabIndex="-1"
  disabled={disabled || readonly || !canMoveDown}
  onClick={this.onReorderClick(index, index + 1)}>⬇</button>
  : null}
  {removable ?
  <button type="button" className="btn btn-danger array-item-remove"
- style={{flex: 1, paddingLeft: 6, paddingRight: 6}}
+ style={btnStyle}
  tabIndex="-1"
  disabled={disabled || readonly}
- onClick={this.onDropIndexClick(index)}>✖︎</button>
+ onClick={this.onDropIndexClick(index)}>✖</button>
  : null}
  </div>
  </div>