CardView: Fix a state issue with the searchPanel.text property, prevent re-renderings (9GXIgWhP) (#29878)

Author: haksur

e2e/testcafe-devextreme/tests/cardView/search/api.functional.ts

@@ -75,19 +75,18 @@ test('searchPanel.placeholder API', async (t) => {
   });
 });
 
-// TODO: unskip when update text property state issue is resolved
-test.skip('searchPanel.text API', async (t) => {
+test('searchPanel.text API', async (t) => {
   const cardView = new CardView('#container');
   const searchBox = cardView.getSearchBox();
 
   await t
-    .expect(searchBox.getInput().getAttribute('value'))
+    .expect(searchBox.getInput().value)
     .eql('rt');
 
   await cardView.apiOption('searchPanel.text', '');
 
   await t
-    .expect(searchBox.getInput().getAttribute('value'))
+    .expect(searchBox.getInput().value)
     .eql('');
 }).before(async () => {
   await createWidget('dxCardView', {
@@ -99,6 +98,23 @@ test.skip('searchPanel.text API', async (t) => {
   });
 });
 
+test('searchPanel.text API from UI', async (t) => {
+  const cardView = new CardView('#container');
+  const searchBox = cardView.getSearchBox().getInput();
+
+  await t
+    .typeText(searchBox, 'rt')
+    .expect(cardView.apiOption('searchPanel.text')).eql('rt');
+}).before(async () => {
+  await createWidget('dxCardView', {
+    ...baseConfig,
+    searchPanel: {
+      ...baseConfig.searchPanel,
+      text: '',
+    },
+  });
+});
+
 test('searchPanel.searchVisibleColumnsOnly API', async (t) => {
   const cardView = new CardView('#container');
   const searchInput = cardView.getSearchBox().getInput();

e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png

@@ -28,6 +28,10 @@ export class SearchController {
 
   public readonly searchTextOption = this.options.twoWay('searchPanel.text');
 
+  public readonly searchPlaceholder = this.options.oneWay('searchPanel.placeholder');
+
+  public readonly searchWidth = this.options.oneWay('searchPanel.width');
+
   private readonly searchVisibleColumnsOnly = this.options.oneWay('searchPanel.searchVisibleColumnsOnly');
 
   public readonly searchFilter = computed(() => {

e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png

@@ -1,12 +1,11 @@
 import type { TextBoxInstance } from '@js/ui/text_box';
-import type { ReadonlySignal } from '@preact/signals-core';
-import { computed } from '@preact/signals-core';
+import type { Signal } from '@preact/signals-core';
+import { effect, signal } from '@preact/signals-core';
 import { ToolbarController } from '@ts/grids/new/grid_core/toolbar/controller';
 
 import { OptionsController } from '../options_controller/options_controller';
 import { SearchController } from './controller';
 import { SearchUIController } from './controller_ui';
-import type { SearchFieldProps } from './types';
 import { addSearchTextBox } from './utils';
 
 export class SearchView {
@@ -17,36 +16,40 @@ export class SearchView {
     SearchController,
   ] as const;
 
-  private searchTextBox: TextBoxInstance | null = null;
+  private readonly searchTextBox: Signal<null | TextBoxInstance> = signal(null);
 
   constructor(
     private readonly options: OptionsController,
     private readonly toolbarController: ToolbarController,
     private readonly searchUIController: SearchUIController,
     private readonly searchController: SearchController,
   ) {
+    const toolbarItem = addSearchTextBox(
+      {
+        placeholder: this.searchController.searchPlaceholder.value,
+        value: this.searchController.searchTextOption.value,
+        width: this.searchController.searchWidth.value,
+        onValueChanged: (text): void => {
+          this.searchController.updateSearchText(text);
+        },
+      },
+      (component) => {
+        this.searchTextBox.value = component;
+      },
+    );
     this.toolbarController.addDefaultItem(
-      computed(() => addSearchTextBox(
-        this.getProps().value,
-        (component) => { this.searchTextBox = component; },
-      )),
+      signal(toolbarItem),
       this.options.oneWay('searchPanel.visible'),
     );
 
-    this.searchUIController.registerCallback('focusSearchTextBox', () => {
-      this.searchTextBox?.focus();
+    effect(() => {
+      this.searchTextBox.value?.option('value', this.searchController.searchTextOption.value);
+      this.searchTextBox.value?.option('placeholder', this.searchController.searchPlaceholder.value);
+      this.searchTextBox.value?.option('width', this.searchController.searchWidth.value);
     });
-  }
 
-  protected getProps(): ReadonlySignal<SearchFieldProps> {
-    return computed(() => ({
-      placeholder: this.options.oneWay('searchPanel.placeholder').value,
-      // TODO: resolve update cycle: editor - option - editor
-      // value: this.searchController.searchTextOption.value,
-      width: this.options.oneWay('searchPanel.width').value,
-      onValueChanged: (text): void => {
-        this.searchController.updateSearchText(text);
-      },
-    }));
+    this.searchUIController.registerCallback('focusSearchTextBox', () => {
+      this.searchTextBox.value?.focus();
+    });
   }
 }