feat(database): save the last title being edited (#3101)

packages/blocks/src/database-block/table/components/column-header/column-header.ts

@@ -430,6 +430,18 @@ export class DatabaseColumnHeader extends WithDisposable(ShadowlessElement) {
 
   private _onEditColumnTitle = (event: MouseEvent, columnId: string) => {
     event.stopPropagation();
+    // If the last clicked column header is being edited, save it first.
+    if (this._editingColumnId !== '') {
+      const column = this.columns.find(
+        column => column.id === this._editingColumnId
+      );
+      if (column) {
+        this._saveColumnTitle('normal', column);
+      } else {
+        this._saveColumnTitle('title');
+      }
+    }
+
     this.setEditingColumnId(columnId);
   };
 

tests/database/database.spec.ts

@@ -973,3 +973,22 @@ test('should title column support quick changing of column type', async ({
   const cell = getFirstColumnCell(page, 'select-selected');
   expect(await cell.count()).toBe(1);
 });
+
+test('should save the previous header being edited when editing the next column header', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyDatabaseState(page);
+
+  await initDatabaseColumn(page);
+  await initDatabaseDynamicRowWithData(page, 'a', true);
+  await focusDatabaseHeader(page, 0);
+  const { textElement, renameIcon: titleRenameIcon } =
+    await getDatabaseHeaderColumn(page, 0);
+  await titleRenameIcon.click();
+  await type(page, '123');
+
+  const { renameIcon } = await getDatabaseHeaderColumn(page, 1);
+  await renameIcon.click();
+  expect(await textElement.innerText()).toBe('123');
+});