@goplusvn/core 0.1.97 → 0.1.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
## 0.1.98 — Chuẩn hóa Modal FocusScope cho Combobox/MultiSelect khi nằm trong Dialog/Sheet/Modal
|
|
2
|
+
|
|
3
|
+
Khi Combobox hoặc MultiSelect nằm trong Modal/Dialog/Sheet (như Modal thanh toán POS hay Sheet bộ lọc nâng cao),
|
|
4
|
+
cơ chế FocusScope Stack của Radix yêu cầu `modal={true}` kết hợp với auto-focus vào `searchInputRef`
|
|
5
|
+
và loại bỏ hoàn toàn các rào cản `stopPropagation` trên `onFocus`/`onClick` của Input.
|
|
6
|
+
|
|
7
|
+
**Đổi**
|
|
8
|
+
|
|
9
|
+
- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — kích hoạt `modal={true}` mặc định,
|
|
10
|
+
tự động focus vào `searchInputRef` khi mở dropdown, bổ sung `onPointerDown` stopPropagation trên Input
|
|
11
|
+
để người dùng click/chạm vào ô tìm kiếm lập tức nhận con trỏ nhập liệu và bật bàn phím.
|
|
12
|
+
|
|
1
13
|
## 0.1.97 — Sửa triệt để tương tác chạm và nhập liệu cho ô tìm kiếm Combobox/MultiSelect
|
|
2
14
|
|
|
3
15
|
Khi `modal={true}` được bật mặc định, Radix Popover kích hoạt FocusScope + ScrollLock
|
package/package.json
CHANGED
|
@@ -212,7 +212,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
|
|
|
212
212
|
loadingText = "Đang tải...",
|
|
213
213
|
className,
|
|
214
214
|
id,
|
|
215
|
-
modal =
|
|
215
|
+
modal = true,
|
|
216
216
|
},
|
|
217
217
|
ref,
|
|
218
218
|
) => {
|
|
@@ -732,6 +732,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
|
|
|
732
732
|
collisionPadding={8}
|
|
733
733
|
onOpenAutoFocus={(e) => {
|
|
734
734
|
e.preventDefault();
|
|
735
|
+
searchInputRef.current?.focus();
|
|
735
736
|
}}
|
|
736
737
|
className="z-[100] flex w-[var(--radix-popover-trigger-width)] min-w-[15rem] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-md border bg-popover/95 p-0 text-popover-foreground shadow-lg shadow-black/5 backdrop-blur-md"
|
|
737
738
|
style={{
|
|
@@ -25,8 +25,8 @@ interface ComboboxProps {
|
|
|
25
25
|
className?: string;
|
|
26
26
|
id?: string;
|
|
27
27
|
/**
|
|
28
|
-
* Chế độ modal cho Popover (mặc định
|
|
29
|
-
*
|
|
28
|
+
* Chế độ modal cho Popover (mặc định true). Bắt buộc true để kích hoạt
|
|
29
|
+
* FocusScope Stack của Radix khi nằm trong Dialog/Sheet/Modal.
|
|
30
30
|
*/
|
|
31
31
|
modal?: boolean;
|
|
32
32
|
/**
|
|
@@ -56,7 +56,7 @@ export function Combobox({
|
|
|
56
56
|
disabled = false,
|
|
57
57
|
className,
|
|
58
58
|
id,
|
|
59
|
-
modal =
|
|
59
|
+
modal = true,
|
|
60
60
|
maxHeight = "20rem",
|
|
61
61
|
}: ComboboxProps) {
|
|
62
62
|
const [open, setOpen] = useState(false);
|
|
@@ -178,6 +178,7 @@ export function Combobox({
|
|
|
178
178
|
collisionPadding={8}
|
|
179
179
|
onOpenAutoFocus={(e) => {
|
|
180
180
|
e.preventDefault();
|
|
181
|
+
searchInputRef.current?.focus();
|
|
181
182
|
}}
|
|
182
183
|
className="z-[100] w-[var(--radix-popover-trigger-width)] min-w-[12rem] max-w-[calc(100vw-1rem)] p-0 flex flex-col overflow-hidden"
|
|
183
184
|
style={{
|