diff --git a/src/tableui.js b/src/tableui.js index 34646f1a..7acc4cd5 100644 --- a/src/tableui.js +++ b/src/tableui.js @@ -54,21 +54,29 @@ export default class TableUI extends Plugin { tooltip: true } ); - // Prepare custom view for dropdown's panel. - const insertTableView = new InsertTableView( locale ); - dropdownView.panelView.children.add( insertTableView ); + let insertTableView; - insertTableView.delegate( 'execute' ).to( dropdownView ); + dropdownView.on( 'change:isOpen', () => { + if ( insertTableView ) { + return; + } - dropdownView.buttonView.on( 'open', () => { - // Reset the chooser before showing it to the user. - insertTableView.rows = 0; - insertTableView.columns = 0; - } ); + // Prepare custom view for dropdown's panel. + insertTableView = new InsertTableView( locale ); + dropdownView.panelView.children.add( insertTableView ); + + insertTableView.delegate( 'execute' ).to( dropdownView ); + + dropdownView.buttonView.on( 'open', () => { + // Reset the chooser before showing it to the user. + insertTableView.rows = 0; + insertTableView.columns = 0; + } ); - dropdownView.on( 'execute', () => { - editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } ); - editor.editing.view.focus(); + dropdownView.on( 'execute', () => { + editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } ); + editor.editing.view.focus(); + } ); } ); return dropdownView; diff --git a/tests/tableui.js b/tests/tableui.js index 15969cf8..b02a05b2 100644 --- a/tests/tableui.js +++ b/tests/tableui.js @@ -11,6 +11,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; import TableEditing from '../src/tableediting'; import TableUI from '../src/tableui'; +import InsertTableView from '../src/ui/inserttableview'; import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview'; import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview'; import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview'; @@ -53,6 +54,7 @@ describe( 'TableUI', () => { beforeEach( () => { insertTable = editor.ui.componentFactory.create( 'insertTable' ); + insertTable.isOpen = true; // Dropdown is lazy loaded, so make sure its open (#6193). } ); it( 'should register insertTable button', () => { @@ -65,7 +67,7 @@ describe( 'TableUI', () => { const command = editor.commands.get( 'insertTable' ); command.isEnabled = true; - expect( insertTable.buttonView.isOn ).to.be.false; + expect( insertTable.buttonView.isOn ).to.be.true; expect( insertTable.buttonView.isEnabled ).to.be.true; command.isEnabled = false; @@ -87,6 +89,8 @@ describe( 'TableUI', () => { } ); it( 'should reset rows & columns on dropdown open', () => { + insertTable.isOpen = true; + const tableSizeView = insertTable.panelView.children.first; expect( tableSizeView.rows ).to.equal( 0 ); @@ -100,6 +104,14 @@ describe( 'TableUI', () => { expect( tableSizeView.rows ).to.equal( 0 ); expect( tableSizeView.columns ).to.equal( 0 ); } ); + + it( 'is not fully initialized when not open', () => { + const dropdown = editor.ui.componentFactory.create( 'insertTable' ); + + for ( const childView of dropdown.panelView.children ) { + expect( childView ).not.to.be.instanceOf( InsertTableView ); + } + } ); } ); describe( 'tableRow dropdown', () => {