Fix react error on switching modes. Add more keys

This commit is contained in:
jos 2018-09-19 09:44:12 +02:00
parent 3865a1d365
commit 37e22908c7
3 changed files with 33 additions and 25 deletions

View File

@ -117,6 +117,8 @@ export default class TextMode extends Component {
/** @protected */
renderMenu () {
return h(TextModeMenu, {
key: 'menu',
mode: this.props.mode,
modes: this.props.modes,
onChangeMode: this.props.onChangeMode,

View File

@ -18,13 +18,17 @@ export default class ModeSelector extends Component {
className: 'jsoneditor-menu-button jsoneditor-type-modes' +
((mode === this.props.mode) ? ' jsoneditor-selected' : ''),
onClick: () => {
try {
this.props.onRequestClose()
// send the onChangeMode on the next tick, after onRequestClose is executed and applied
setTimeout(() => {
try {
this.props.onChangeMode(mode)
}
catch (err) {
this.props.onError(err)
}
})
}
}, toCapital(mode))
})

View File

@ -29,7 +29,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,
@ -43,6 +43,7 @@ export default class TreeModeMenu extends PureComponent {
// format / compact / repair
items = items.concat([
h('div', {className: 'jsoneditor-menu-group', key: 'format-compact-repair'}, [
h('button', {
key: 'format',
className: 'jsoneditor-format',
@ -62,6 +63,7 @@ export default class TreeModeMenu extends PureComponent {
onClick: this.props.onRepair
}, h('i', {className: 'fa fa-screwdriver'})),
])
])
return h('div', {key: 'menu', className: 'jsoneditor-menu'}, items)
}