Fix search text input issues (#209365)

Fixes #209361

src/vs/workbench/contrib/notebook/browser/contrib/find/notebookFindReplaceWidget.ts

@@ -182,7 +182,7 @@ export class NotebookFindInputFilterButton extends Disposable {
 		return this._filterButtonContainer;
 	}
 
-	get width() {
+	width() {
 		return 2 /*margin left*/ + 2 /*border*/ + 2 /*padding*/ + 16 /* icon width */;
 	}
 
@@ -194,6 +194,14 @@ export class NotebookFindInputFilterButton extends Disposable {
 		this.container.setAttribute('aria-disabled', String(true));
 	}
 
+	set visible(visible: boolean) {
+		this._filterButtonContainer.style.display = visible ? '' : 'none';
+	}
+
+	get visible() {
+		return this._filterButtonContainer.style.display !== 'none';
+	}
+
 	applyStyles(filterChecked: boolean): void {
 		const toggleStyles = this._toggleStyles;
 
@@ -235,7 +243,7 @@ export class NotebookFindInput extends FindInput {
 		this._register(registerAndCreateHistoryNavigationContext(contextKeyService, this.inputBox));
 		this._findFilter = this._register(new NotebookFindInputFilterButton(filters, contextMenuService, instantiationService, options));
 
-		this.inputBox.paddingRight = (this.caseSensitive?.width() ?? 0) + (this.wholeWords?.width() ?? 0) + (this.regex?.width() ?? 0) + this._findFilter.width;
+		this.inputBox.paddingRight = (this.caseSensitive?.width() ?? 0) + (this.wholeWords?.width() ?? 0) + (this.regex?.width() ?? 0) + this._findFilter.width();
 		this.controls.appendChild(this._findFilter.container);
 	}
 

src/vs/workbench/contrib/search/browser/searchFindInput.ts

@@ -24,7 +24,6 @@ export class SearchFindInput extends ContextScopedFindInput {
 	private _findFilter: NotebookFindInputFilterButton;
 	private _aiButton: AIToggle;
 	private _filterChecked: boolean = false;
-	private _visible: boolean = false;
 	private readonly _onDidChangeAIToggle = this._register(new Emitter<boolean>());
 	public readonly onDidChangeAIToggle = this._onDidChangeAIToggle.event;
 
@@ -36,7 +35,7 @@ export class SearchFindInput extends ContextScopedFindInput {
 		readonly contextMenuService: IContextMenuService,
 		readonly instantiationService: IInstantiationService,
 		readonly filters: NotebookFindFilters,
-		private _shouldShowAIButton: boolean, // caller responsible for updating this when it changes,
+		shouldShowAIButton: boolean, // caller responsible for updating this when it changes,
 		filterStartVisiblitity: boolean
 	) {
 		super(container, contextViewProvider, options, contextKeyService);
@@ -58,12 +57,13 @@ export class SearchFindInput extends ContextScopedFindInput {
 
 		this.setAdditionalToggles([this._aiButton]);
 
-
-		this.inputBox.paddingRight = (this.caseSensitive?.width() ?? 0) + (this.wholeWords?.width() ?? 0) + (this.regex?.width() ?? 0) + this._findFilter.width;
+		this._updatePadding();
 
 		this.controls.appendChild(this._findFilter.container);
 		this._findFilter.container.classList.add('monaco-custom-toggle');
 		this.filterVisible = filterStartVisiblitity;
+		// ensure that ai button is visible if it should be
+		this.sparkleVisible = shouldShowAIButton;
 
 		this._register(this._aiButton.onChange(() => {
 			if (this._aiButton.checked) {
@@ -78,34 +78,38 @@ export class SearchFindInput extends ContextScopedFindInput {
 				this._findFilter.enable();
 			}
 		}));
+	}
 
-		// ensure that ai button is visible if it should be
-		this._aiButton.domNode.style.display = _shouldShowAIButton ? '' : 'none';
+	private _updatePadding() {
+		this.inputBox.paddingRight =
+			(this.caseSensitive?.width() ?? 0) +
+			(this.wholeWords?.width() ?? 0) +
+			(this.regex?.width() ?? 0) +
+			(this._findFilter.visible ? this._findFilter.width() : 0) +
+			(this._aiButton.visible ? this._aiButton.width() : 0);
 	}
 
-	set shouldShowAIButton(visible: boolean) {
-		if (this._shouldShowAIButton !== visible) {
-			this._shouldShowAIButton = visible;
-			this._aiButton.domNode.style.display = visible ? '' : 'none';
-		}
+	set sparkleVisible(visible: boolean) {
+		this._aiButton.visible = visible;
+		this._updatePadding();
 	}
 
 	set filterVisible(visible: boolean) {
-		this._findFilter.container.style.display = visible ? '' : 'none';
-		this._visible = visible;
-		this.updateStyles();
+		this._findFilter.visible = visible;
+		this.updateFilterStyles();
+		this._updatePadding();
 	}
 
 	override setEnabled(enabled: boolean) {
 		super.setEnabled(enabled);
-		if (enabled && (!this._filterChecked || !this._visible)) {
+		if (enabled && (!this._filterChecked || !this._findFilter.visible)) {
 			this.regex?.enable();
 		} else {
 			this.regex?.disable();
 		}
 	}
 
-	updateStyles() {
+	updateFilterStyles() {
 		// filter is checked if it's in a non-default state
 		this._filterChecked =
 			!this.filters.markupInput ||
@@ -114,7 +118,6 @@ export class SearchFindInput extends ContextScopedFindInput {
 			!this.filters.codeOutput;
 
 		// TODO: find a way to express that searching notebook output and markdown preview don't support regex.
-
 		this._findFilter.applyStyles(this._filterChecked);
 	}
 
@@ -135,4 +138,12 @@ class AIToggle extends Toggle {
 			inputActiveOptionBackground: opts.inputActiveOptionBackground
 		});
 	}
+
+	set visible(visible: boolean) {
+		this.domNode.style.display = visible ? '' : 'none';
+	}
+
+	get visible() {
+		return this.domNode.style.display !== 'none';
+	}
 }

src/vs/workbench/contrib/search/browser/searchView.ts

@@ -365,7 +365,7 @@ export class SearchView extends ViewPane {
 	private refreshHasAISetting() {
 		const val = this.shouldShowAIButton();
 		if (val && this.searchWidget.searchInput) {
-			this.searchWidget.searchInput.shouldShowAIButton = val;
+			this.searchWidget.searchInput.sparkleVisible = val;
 		}
 	}
 	private onDidChangeWorkbenchState(): void {

src/vs/workbench/contrib/search/browser/searchWidget.ts

@@ -210,7 +210,7 @@ export class SearchWidget extends Widget {
 		this._register(
 			this._notebookFilters.onDidChange(() => {
 				if (this.searchInput) {
-					this.searchInput.updateStyles();
+					this.searchInput.updateFilterStyles();
 				}
 			}));
 		this._register(this.editorService.onDidEditorsChange((e) => {