From e5be570f54e206e4d95de659bb561a91046adae7 Mon Sep 17 00:00:00 2001
From: 3720 <zuozijian1994@gmail.com>
Date: Wed, 1 Nov 2023 17:28:00 +0800
Subject: [PATCH] fix(core): text color of search input, style for the
 multi-select tag, date-picker autofocus issue (#4799)

---
 .../src/components/page-list/filter/condition.tsx    | 12 ++++++++++--
 .../src/components/page-list/filter/index.css.ts     |  2 ++
 .../components/page-list/filter/multi-select.css.ts  |  1 +
 .../components/page-list/view/edit-collection.tsx    |  9 +++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/component/src/components/page-list/filter/condition.tsx b/packages/frontend/component/src/components/page-list/filter/condition.tsx
index f7cc96409..462223c95 100644
--- a/packages/frontend/component/src/components/page-list/filter/condition.tsx
+++ b/packages/frontend/component/src/components/page-list/filter/condition.tsx
@@ -47,7 +47,12 @@ export const Condition = ({
       const args = renderArgs(value, onChange, data.type);
       return (
         <div
-          style={{ display: 'flex', userSelect: 'none', alignItems: 'center' }}
+          style={{
+            display: 'flex',
+            userSelect: 'none',
+            alignItems: 'center',
+            overflow: 'hidden',
+          }}
         >
           <Menu
             items={
@@ -135,7 +140,10 @@ export const Arg = ({
     return null;
   }
   return (
-    <div data-testid="filter-arg" style={{ marginLeft: 4, fontWeight: 600 }}>
+    <div
+      data-testid="filter-arg"
+      style={{ marginLeft: 4, fontWeight: 600, overflow: 'hidden' }}
+    >
       {data.render({
         type,
         value: value?.value,
diff --git a/packages/frontend/component/src/components/page-list/filter/index.css.ts b/packages/frontend/component/src/components/page-list/filter/index.css.ts
index 288ed78db..2f8a7af05 100644
--- a/packages/frontend/component/src/components/page-list/filter/index.css.ts
+++ b/packages/frontend/component/src/components/page-list/filter/index.css.ts
@@ -27,6 +27,7 @@ export const filterItemStyle = style({
   borderRadius: '8px',
   background: 'var(--affine-white)',
   padding: '4px 8px',
+  overflow: 'hidden',
 });
 
 export const filterItemCloseStyle = style({
@@ -58,6 +59,7 @@ export const switchStyle = style({
     background: 'var(--affine-hover-color)',
     borderRadius: '4px',
   },
+  whiteSpace: 'nowrap',
 });
 export const filterTypeStyle = style({
   fontSize: 'var(--affine-font-sm)',
diff --git a/packages/frontend/component/src/components/page-list/filter/multi-select.css.ts b/packages/frontend/component/src/components/page-list/filter/multi-select.css.ts
index 543102468..6cc90537b 100644
--- a/packages/frontend/component/src/components/page-list/filter/multi-select.css.ts
+++ b/packages/frontend/component/src/components/page-list/filter/multi-select.css.ts
@@ -6,6 +6,7 @@ export const content = style({
   borderRadius: 8,
   padding: '3px 4px',
   cursor: 'pointer',
+  overflow: 'hidden',
   ':hover': {
     backgroundColor: 'var(--affine-hover-color)',
   },
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection.tsx b/packages/frontend/component/src/components/page-list/view/edit-collection.tsx
index 1ce7c4d3d..0d3ab7531 100644
--- a/packages/frontend/component/src/components/page-list/view/edit-collection.tsx
+++ b/packages/frontend/component/src/components/page-list/view/edit-collection.tsx
@@ -232,6 +232,12 @@ const RulesMode = ({
   const count = allowListPages.length + rulesPages.length;
   return (
     <>
+      {/*prevents modal autofocus to the first input*/}
+      <input
+        type="text"
+        style={{ width: 0, height: 0 }}
+        onFocus={e => requestAnimationFrame(() => e.target.blur())}
+      />
       <div className={clsx(styles.rulesTitle, styles.ellipsis)}>
         <Trans
           i18nKey="com.affine.editCollection.rules.tips"
@@ -532,6 +538,9 @@ const PagesMode = ({
         value={searchText}
         onChange={e => updateSearchText(e.target.value)}
         className={styles.rulesTitle}
+        style={{
+          color: 'var(--affine-text-primary-color)',
+        }}
         placeholder={t['com.affine.editCollection.search.placeholder']()}
       ></input>
       <div className={styles.pagesList}>