fix: normal list mode cannot be selected (#67)

Author: TMZZ031130

.changes/fix-list-selection.md

@@ -0,0 +1,9 @@
+---
+"@matechat/react": patch:fix
+---
+
+Fixed the issue that normal list mode cannot be selected.
+
+Other optimizations:
+- Remove the `className` attribute from the `list`.
+- Add an id attribute to the li option of the list component.

src/list.tsx

@@ -57,7 +57,6 @@ interface OptionGroupItem {
 export type MixedOptionArray = Array<OptionGroupItem | OptionData>;
 
 export const List = ({
-  className,
   listBoxStyle,
   listGroupStyle,
   listItemStyle,
@@ -74,15 +73,16 @@ export const List = ({
     event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
     option: UnknownRecord,
   ) => {
+    const optionValue = option[optionLabel];
     const changeEvent: ListChangeEvent = {
       originalEvent: event,
-      value: option[optionLabel],
+      value: optionValue,
       stopPropagation: () => event.stopPropagation(),
       preventDefault: () => event.preventDefault(),
       target: {
         name: option.label?.toString() || "",
-        id: option.value?.toString() || "",
-        value: option[optionLabel],
+        id: "list",
+        value: optionValue,
       },
     };
     onChange?.(changeEvent);
@@ -139,12 +139,11 @@ export const List = ({
     const optionData = option as OptionData;
     const optionKey = optionData[optionLabel as keyof OptionData];
     const key = `option_${index}_${String(optionKey)}`;
-
     const handleClick = (e: React.MouseEvent<HTMLElement>) => {
       handleSelect(e, optionData);
     };
 
-    const optionValue = optionData.value;
+    const optionValue = optionData[optionLabel];
     const isSelected = String(optionValue) === String(value);
 
     return (
@@ -156,6 +155,7 @@ export const List = ({
             "bg-blue-500 text-white hover:bg-blue-600": isSelected,
           }),
         )}
+        id={`lo_id_${index}`}
         style={listItemStyle}
         onClick={handleClick}
         onKeyDown={(e) => {