feat(treeview): add a search field to lists

This change came about because of the difficulty of finding items in
really long dropdown lists. We can make a fairly quick solution to this
using the existing filtering functions, tied to an input element which
sticks to the top of the dropdown list...

I'm a little unconvinced by using position: sticky, since as overscroll
will cause the search bar to move (which is cosmetically weird, though
not actually a functional problem). Nevertheless, I couldn't find
something obviously better without making a risky change to treeviews at
large. I suspect you can do some position: absolute thing to minimize
trouble, but whatever it is it won't be clean.

This depends on https://gerrit.libreoffice.org/c/core/+/195719 to hide
the search field with checkbox lists to avoid duplicates there

We also explicitly ignore some dropdown lists - the search results and
the mention popup - since as having a search there doesn't make a lot of
sense...

Signed-off-by: Skyler Grey <[email protected]>
Change-Id: Ib8000bc3e5566993fa6eea89adcc617b6a6a6964

Author: Minion3665

browser/css/jsdialogs.css

@@ -640,6 +640,33 @@ algned to the bottom */
 	scrollbar-color: var(--scrollbar-color);
 }
 
+.ui-treeview:has(> .ui-treeview-search-container) {
+	padding-top: 0;
+	/* otherwise position: sticky will leave a gap. We can't top: -1 on the search container or it'll scroll... */
+}
+
+.ui-treeview-search-container {
+	/* we're using position: sticky at all since as we don't want to nest this in
+		 another div and we don't want to scroll offscreen... it's a little ugly, but I
+		 didn't think position: fixed and margin hacks would go down any more nicely...
+	*/
+	position: sticky;
+	top: 0;
+	grid-column: 1 / -1;
+	background-color: var(--color-background-lighter);
+
+	/* margin-left and margin-right can counterbalance the .ui-treeview padding here */
+	margin-left: -1px;
+	margin-right: -1px;
+	padding-left: 1px;
+	padding-right: 1px;
+}
+
+[id^='ui-treeview-search-input'] {
+	width: 100%;
+	box-sizing: border-box;
+}
+
 #__MENU__.ui-treeview {
 	min-height: min-content;
 }

browser/src/canvas/sections/CommentListSection.ts

@@ -560,6 +560,7 @@ export class CommentSection extends CanvasSectionObject {
 				fireKeyEvents: true,
 				hideIfEmpty: true,
 				entries: [] as Array<TreeEntryJSON>,
+				noSearchField: true,
 			},
 			{
 				id: '',

browser/src/control/AutoCompletePopup.ts

@@ -99,6 +99,7 @@ abstract class AutoCompletePopup {
 			singleclickactivate: false,
 			fireKeyEvents: true,
 			entries: [] as Array<TreeEntryJSON>,
+			noSearchField: true,
 		} as TreeWidgetJSON;
 	}
 

browser/src/control/Control.QuickFindPanel.ts

@@ -36,8 +36,10 @@ class QuickFindPanel extends SidebarBase {
 		if (
 			data.control.id === 'searchfinds' &&
 			data.control.type === 'treelistbox'
-		)
+		) {
 			e.data.control.ignoreFocus = true;
+			e.data.control.noSearchField = true;
+		}
 
 		if (!super.onJSUpdate(e)) return false;
 
@@ -75,6 +77,30 @@ class QuickFindPanel extends SidebarBase {
 			quickFindControls.classList.toggle('hidden', isEmpty);
 	}
 
+	removeSearchFields(quickFindData: any): any {
+		if (quickFindData.children) {
+			const modifiedData = JSON.parse(JSON.stringify(quickFindData));
+
+			const _removeSearchFields = (data: any) => {
+				for (const child of data.children) {
+					if (child.type === 'treelistbox') {
+						child.noSearchField = true;
+					}
+
+					if (child.children) {
+						_removeSearchFields(child);
+					}
+				}
+			};
+
+			_removeSearchFields(modifiedData);
+
+			return modifiedData;
+		}
+
+		return quickFindData;
+	}
+
 	addPlaceholderIfEmpty(quickFindData: any): any {
 		const hasEntries =
 			quickFindData.children &&
@@ -114,7 +140,8 @@ class QuickFindPanel extends SidebarBase {
 
 		this.container.innerHTML = '';
 
-		const modifiedData = this.addPlaceholderIfEmpty(quickFindData);
+		let modifiedData = this.removeSearchFields(quickFindData);
+		modifiedData = this.addPlaceholderIfEmpty(modifiedData);
 
 		this.builder?.build(this.container, [modifiedData], false);
 

browser/src/control/jsdialog/Definitions.Types.ts

@@ -376,6 +376,7 @@ interface TreeWidgetJSON extends WidgetJSON {
 	highlightTerm?: string; // what, if any, entries are we highlighting?
 	ignoreFocus?: boolean; // When true, does't focus to selected item automatically.
 	customEntryRenderer?: boolean;
+	noSearchField?: boolean; // When true, the widget shouldn't have a search field added
 }
 
 interface IconViewEntry {

browser/src/control/jsdialog/Widget.TreeView.ts

@@ -73,6 +73,7 @@ class TreeViewControl {
 	_tbody: HTMLElement;
 	_thead: HTMLElement = null;
 	_columns: number;
+	_maxColumnsIncludingState: number = 0;
 	_hasState: boolean;
 	_hasIcon: boolean;
 	_isNavigator: boolean;
@@ -369,6 +370,9 @@ class TreeViewControl {
 		let dummyColumns = 0;
 		if (this._hasState) dummyColumns++;
 		tr.style.gridColumn = '1 / ' + (this._columns + dummyColumns + 1);
+		if (this._columns + dummyColumns + 1 > this._maxColumnsIncludingState) {
+			this._maxColumnsIncludingState = this._columns + dummyColumns + 1;
+		}
 		if (
 			this.isPageDivider(entry, this.PAGE_ENTRY_PREFIX, this.PAGE_ENTRY_SUFFIX)
 		) {
@@ -1620,6 +1624,22 @@ class TreeViewControl {
 		if (level === 1 && !hasSelectedEntry) this.makeTreeViewFocusable(true);
 	}
 
+	showSearchBar(parent: HTMLElement) {
+		const searchBox = document.createElement('input');
+		searchBox.id = JSDialog.MakeIdUnique('ui-treeview-search-input'); // Form fields should have either a name or an ID - using this instead of a class
+		searchBox.placeholder = 'Search...';
+		searchBox.addEventListener('input', () =>
+			this.filterEntries(searchBox.value),
+		);
+
+		const searchContainer = document.createElement('div');
+		searchContainer.className = 'ui-treeview-search-container';
+		searchContainer.style.gridColumn = '1 / ' + this._maxColumnsIncludingState;
+		searchContainer.appendChild(searchBox);
+
+		parent.insertAdjacentElement('afterbegin', searchContainer);
+	}
+
 	fillEntry(
 		data: TreeWidgetJSON,
 		entry: TreeEntryJSON,
@@ -1643,6 +1663,9 @@ class TreeViewControl {
 			let dummyColumns = 0;
 			if (this._hasState) dummyColumns++;
 			subGrid.style.gridColumn = '1 / ' + (this._columns + dummyColumns + 1);
+			if (this._columns + dummyColumns + 1 > this._maxColumnsIncludingState) {
+				this._maxColumnsIncludingState = this._columns + dummyColumns + 1;
+			}
 
 			this.fillEntries(data, entry.children, builder, level + 1, subGrid);
 		}
@@ -1776,6 +1799,10 @@ class TreeViewControl {
 		this.fillHeaders(data.headers, builder);
 		this.fillEntries(data, data.entries, builder, 1, this._tbody);
 
+		if (this._isListbox && !data.noSearchField) {
+			this.showSearchBar(this._container);
+		}
+
 		return true;
 	}
 }

cypress_test/integration_tests/desktop/calc/autofilter_spec.js

@@ -102,7 +102,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'AutoFilter', function() {
 	it('Filter empty/non-empty cells', function() {
 		//empty
 		calcHelper.openAutoFilterMenu(true);
-		cy.cGet('#check_list_box .ui-treeview-entry:nth-child(1) > div > input').click();
+		cy.cGet('#check_list_box :nth-child(1 of .ui-treeview-entry) > div > input').click();
 		cy.cGet('#ok').click();
 		// Wait for autofilter dialog to close
 		cy.cGet('div.autofilter').should('not.exist');
@@ -165,16 +165,16 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'AutoFilter', function() {
 	it('Disable already filtered', function () {
 		// Filter row with ['Test 4', ''] on the first column
 		calcHelper.openAutoFilterMenu();
-		cy.cGet('#check_list_box .ui-treeview-entry:nth-child(4) > div > input').click();
+		cy.cGet('#check_list_box :nth-child(4 of .ui-treeview-entry) > div > input').click();
 		cy.cGet('#ok').click();
 		// Wait for autofilter dialog to close
 		cy.cGet('div.autofilter').should('not.exist');
 
 		// Open autofilter menu on the second column
 		calcHelper.openAutoFilterMenu(true);
 		// Check that '(empty)' option is disabled
-		cy.cGet('#check_list_box .ui-treeview-entry:nth-child(3) > div').should('contain.text', '(empty)');
-		cy.cGet('#check_list_box .ui-treeview-entry:nth-child(3) > div > input').should('be.disabled');
+		cy.cGet('#check_list_box :nth-child(3 of .ui-treeview-entry) > div').should('contain.text', '(empty)');
+		cy.cGet('#check_list_box :nth-child(3 of .ui-treeview-entry) > div > input').should('be.disabled');
 
 	});
 });