Fix expand button losing focus when clicking it. Add missing `key` here and there
This commit is contained in:
parent
fdd44a276c
commit
3865a1d365
|
@ -523,16 +523,19 @@ export default class JSONNode extends PureComponent {
|
|||
const expanded = this.props.eson[EXPANDED]
|
||||
const className = `jsoneditor-button jsoneditor-${expanded ? 'expanded' : 'collapsed'}`
|
||||
|
||||
// unique key depending on expanded state is to force the fontawesome icon to update
|
||||
return h('div', {key: expanded, className: 'jsoneditor-button-container'},
|
||||
|
||||
return h('div', {key: 'expand', className: 'jsoneditor-button-container'},
|
||||
h('button', {
|
||||
className: className,
|
||||
onClick: this.handleExpand,
|
||||
title:
|
||||
'Click to expand/collapse this field. \n' +
|
||||
'Ctrl+Click to expand/collapse including all childs.'
|
||||
}, h('span', {
|
||||
key: expanded, // to force the fontawesome icon to update
|
||||
}, h('i', {
|
||||
className: expanded ? 'fa fa-caret-down' : 'fa fa-caret-right'}))
|
||||
className: expanded ? 'fa fa-caret-down' : 'fa fa-caret-right'
|
||||
})))
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -272,6 +272,8 @@ export default class TreeMode extends PureComponent {
|
|||
|
||||
renderMenu () {
|
||||
return h(TreeModeMenu, {
|
||||
key: 'menu',
|
||||
|
||||
mode: this.props.mode,
|
||||
modes: this.props.modes,
|
||||
onChangeMode: this.props.onChangeMode,
|
||||
|
@ -292,6 +294,8 @@ export default class TreeMode extends PureComponent {
|
|||
}
|
||||
|
||||
return h(Search, {
|
||||
key: 'search',
|
||||
|
||||
text: this.state.searchResult.text,
|
||||
resultCount: this.state.searchResult.matches
|
||||
? this.state.searchResult.matches.length : 0,
|
||||
|
|
|
@ -25,15 +25,15 @@ export default class Search extends Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
return h('div', {className: 'jsoneditor-search'}, [
|
||||
return h('div', {className: 'jsoneditor-search'},
|
||||
h('form', {
|
||||
key: 'box',
|
||||
className: 'jsoneditor-search-box',
|
||||
onSubmit: this.handleSubmit
|
||||
}, [
|
||||
h('div', { className: 'jsoneditor-search-icon' }, [
|
||||
h('div', { className: 'jsoneditor-search-icon', key: 'icon' },
|
||||
h('i', {className: 'fa fa-search'})
|
||||
]),
|
||||
),
|
||||
h('input', {
|
||||
key: 'input',
|
||||
type: 'text',
|
||||
|
@ -65,7 +65,7 @@ export default class Search extends Component {
|
|||
}, h('i', {className: 'fa fa-times'})),
|
||||
]),
|
||||
// this.renderResultsCount(this.props.resultCount) // FIXME: show result count
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
renderResultsCount (resultCount) {
|
||||
|
|
|
@ -56,7 +56,7 @@ export default class TreeModeMenu extends PureComponent {
|
|||
// mode
|
||||
if (this.props.modes ) {
|
||||
items = items.concat([
|
||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
||||
h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
|
||||
h(ModeButton, {
|
||||
key: 'mode',
|
||||
modes: this.props.modes,
|
||||
|
@ -70,7 +70,7 @@ export default class TreeModeMenu extends PureComponent {
|
|||
|
||||
// cut / copy / paste
|
||||
items = items.concat([
|
||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
||||
h('div', {className: 'jsoneditor-menu-group', key: 'cut-copy-paste'}, [
|
||||
h('button', {
|
||||
key: 'cut',
|
||||
className: 'jsoneditor-cut',
|
||||
|
@ -97,7 +97,7 @@ export default class TreeModeMenu extends PureComponent {
|
|||
|
||||
// TODO: [insert structure / insert value / insert array / insert object] / duplicate / remove
|
||||
items = items.concat([
|
||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
||||
h('div', {className: 'jsoneditor-menu-group', key: 'insert-duplicate-remove'}, [
|
||||
h('button', {
|
||||
key: 'insert',
|
||||
className: 'jsoneditor-insert',
|
||||
|
@ -123,7 +123,7 @@ export default class TreeModeMenu extends PureComponent {
|
|||
|
||||
// sort / transform
|
||||
items = items.concat([
|
||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
||||
h('div', {className: 'jsoneditor-menu-group', key: 'sort-transform'}, [
|
||||
h('button', {
|
||||
key: 'sort',
|
||||
className: 'jsoneditor-sort',
|
||||
|
@ -149,7 +149,7 @@ export default class TreeModeMenu extends PureComponent {
|
|||
// undo / redo
|
||||
if (this.props.mode !== 'view' && this.props.enableHistory !== false) {
|
||||
items = items.concat([
|
||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
||||
h('div', {className: 'jsoneditor-menu-group', key: 'undo-redo'}, [
|
||||
h('button', {
|
||||
key: 'undo',
|
||||
className: 'jsoneditor-undo',
|
||||
|
|
Loading…
Reference in New Issue