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 expanded = this.props.eson[EXPANDED]
|
||||||
const className = `jsoneditor-button jsoneditor-${expanded ? 'expanded' : 'collapsed'}`
|
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', {
|
h('button', {
|
||||||
className: className,
|
className: className,
|
||||||
onClick: this.handleExpand,
|
onClick: this.handleExpand,
|
||||||
title:
|
title:
|
||||||
'Click to expand/collapse this field. \n' +
|
'Click to expand/collapse this field. \n' +
|
||||||
'Ctrl+Click to expand/collapse including all childs.'
|
'Ctrl+Click to expand/collapse including all childs.'
|
||||||
|
}, h('span', {
|
||||||
|
key: expanded, // to force the fontawesome icon to update
|
||||||
}, h('i', {
|
}, 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 () {
|
renderMenu () {
|
||||||
return h(TreeModeMenu, {
|
return h(TreeModeMenu, {
|
||||||
|
key: 'menu',
|
||||||
|
|
||||||
mode: this.props.mode,
|
mode: this.props.mode,
|
||||||
modes: this.props.modes,
|
modes: this.props.modes,
|
||||||
onChangeMode: this.props.onChangeMode,
|
onChangeMode: this.props.onChangeMode,
|
||||||
|
@ -292,6 +294,8 @@ export default class TreeMode extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return h(Search, {
|
return h(Search, {
|
||||||
|
key: 'search',
|
||||||
|
|
||||||
text: this.state.searchResult.text,
|
text: this.state.searchResult.text,
|
||||||
resultCount: this.state.searchResult.matches
|
resultCount: this.state.searchResult.matches
|
||||||
? this.state.searchResult.matches.length : 0,
|
? this.state.searchResult.matches.length : 0,
|
||||||
|
|
|
@ -25,15 +25,15 @@ export default class Search extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return h('div', {className: 'jsoneditor-search'}, [
|
return h('div', {className: 'jsoneditor-search'},
|
||||||
h('form', {
|
h('form', {
|
||||||
key: 'box',
|
key: 'box',
|
||||||
className: 'jsoneditor-search-box',
|
className: 'jsoneditor-search-box',
|
||||||
onSubmit: this.handleSubmit
|
onSubmit: this.handleSubmit
|
||||||
}, [
|
}, [
|
||||||
h('div', { className: 'jsoneditor-search-icon' }, [
|
h('div', { className: 'jsoneditor-search-icon', key: 'icon' },
|
||||||
h('i', {className: 'fa fa-search'})
|
h('i', {className: 'fa fa-search'})
|
||||||
]),
|
),
|
||||||
h('input', {
|
h('input', {
|
||||||
key: 'input',
|
key: 'input',
|
||||||
type: 'text',
|
type: 'text',
|
||||||
|
@ -65,7 +65,7 @@ export default class Search extends Component {
|
||||||
}, h('i', {className: 'fa fa-times'})),
|
}, h('i', {className: 'fa fa-times'})),
|
||||||
]),
|
]),
|
||||||
// this.renderResultsCount(this.props.resultCount) // FIXME: show result count
|
// this.renderResultsCount(this.props.resultCount) // FIXME: show result count
|
||||||
])
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
renderResultsCount (resultCount) {
|
renderResultsCount (resultCount) {
|
||||||
|
|
|
@ -56,7 +56,7 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
// mode
|
// mode
|
||||||
if (this.props.modes ) {
|
if (this.props.modes ) {
|
||||||
items = items.concat([
|
items = items.concat([
|
||||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
|
||||||
h(ModeButton, {
|
h(ModeButton, {
|
||||||
key: 'mode',
|
key: 'mode',
|
||||||
modes: this.props.modes,
|
modes: this.props.modes,
|
||||||
|
@ -70,7 +70,7 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
|
|
||||||
// cut / copy / paste
|
// cut / copy / paste
|
||||||
items = items.concat([
|
items = items.concat([
|
||||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'cut-copy-paste'}, [
|
||||||
h('button', {
|
h('button', {
|
||||||
key: 'cut',
|
key: 'cut',
|
||||||
className: 'jsoneditor-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
|
// TODO: [insert structure / insert value / insert array / insert object] / duplicate / remove
|
||||||
items = items.concat([
|
items = items.concat([
|
||||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'insert-duplicate-remove'}, [
|
||||||
h('button', {
|
h('button', {
|
||||||
key: 'insert',
|
key: 'insert',
|
||||||
className: 'jsoneditor-insert',
|
className: 'jsoneditor-insert',
|
||||||
|
@ -123,7 +123,7 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
|
|
||||||
// sort / transform
|
// sort / transform
|
||||||
items = items.concat([
|
items = items.concat([
|
||||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'sort-transform'}, [
|
||||||
h('button', {
|
h('button', {
|
||||||
key: 'sort',
|
key: 'sort',
|
||||||
className: 'jsoneditor-sort',
|
className: 'jsoneditor-sort',
|
||||||
|
@ -149,7 +149,7 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
// undo / redo
|
// undo / redo
|
||||||
if (this.props.mode !== 'view' && this.props.enableHistory !== false) {
|
if (this.props.mode !== 'view' && this.props.enableHistory !== false) {
|
||||||
items = items.concat([
|
items = items.concat([
|
||||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'undo-redo'}, [
|
||||||
h('button', {
|
h('button', {
|
||||||
key: 'undo',
|
key: 'undo',
|
||||||
className: 'jsoneditor-undo',
|
className: 'jsoneditor-undo',
|
||||||
|
|
Loading…
Reference in New Issue