✨ Allow Select components to keep their original values

Author: Frontendland

src/components/Select/Select.astro

@@ -21,8 +21,9 @@ const {
     label,
     subText,
     disabled,
-    className,
     position,
+    updateValue = true,
+    className,
     ...rest
 } = Astro.props
 
@@ -42,6 +43,7 @@ const classes = classNames([
     label={label}
     subText={subText}
     data-id={`w-select-${name}`}
+    data-no-update={!updateValue ? 'true' : undefined}
     data-position={position}
     labelClassName={classes}
 >
@@ -125,12 +127,13 @@ const classes = classNames([
 
         closePopover(`[data-id="${popoverId}"]`)
 
-        selectElement.value = name
+        if (!selectElement.dataset.noUpdate) {
+            selectElement.value = name
+        }
 
         dispatch('selectOnChange', {
-            select: selectName,
-            selectElement,
-            ...payload
+            ...payload,
+            select: selectName
         })
     })
 </script>

src/components/Select/Select.svelte

@@ -16,14 +16,17 @@
 
     import styles from './select.module.scss'
 
+    import type { ListEventType } from '../List/list'
+
     export let name: SvelteSelectProps['name'] = ''
     export let value: SvelteSelectProps['value'] = ''
     export let placeholder: SvelteSelectProps['placeholder'] = ''
     export let label: SvelteSelectProps['label'] = ''
     export let subText: SvelteSelectProps['subText'] = ''
     export let disabled: SvelteSelectProps['disabled'] = false
-    export let className: SvelteSelectProps['className'] = ''
+    export let updateValue: SvelteSelectProps['updateValue'] = true
     export let position: SvelteSelectProps['position'] = 'bottom'
+    export let className: SvelteSelectProps['className'] = ''
     export let onChange: SvelteSelectProps['onChange'] = () => {}
 
     let popoverInstance: any
@@ -39,14 +42,16 @@
         styles.popover
     ])
 
-    const select = (payload: any) => {
+    const select = (event: ListEventType) => {
         closePopover(`.w-options-${name}`)
 
-        value = payload.name
+        if (updateValue) {
+            value = event.name
+        }
 
         onChange?.({
-            select: name,
-            ...payload
+            ...event,
+            select: name
         })
     }
 

src/components/Select/Select.tsx

@@ -15,15 +15,18 @@ import ArrowDown from '../../icons/arrow-down.svg?raw'
 
 import styles from './select.module.scss'
 
+import type { ListEventType } from '../List/list'
+
 const Select = ({
     name,
     value,
     placeholder,
     label,
     subText,
     disabled,
-    className,
+    updateValue = true,
     position = 'bottom',
+    className,
     onChange,
     ...rest
 }: ReactSelectProps) => {
@@ -41,14 +44,16 @@ const Select = ({
 
     let popoverInstance: any
 
-    const select = (payload: any) => {
+    const select = (event: ListEventType) => {
         closePopover(`.w-options-${name}`)
 
-        setValue(payload.name)
+        if (updateValue) {
+            setValue(event.name)
+        }
 
         onChange?.({
-            select: name,
-            ...payload
+            ...event,
+            select: name
         })
     }
 

src/components/Select/select.ts

@@ -2,20 +2,25 @@ import type { PopoverPosition } from '../../utils/popover'
 
 import type { ListEventType, ListProps } from '../List/list'
 
+export type SelectEventType = {
+    select: string
+} & ListEventType
+
 export type SelectProps = {
     name: string
     value?: string
     placeholder?: string
     label?: string
     subText?: string
     disabled?: boolean
+    updateValue?: boolean
     position?: PopoverPosition | 'modal'
 } & ListProps
 
 export type SvelteSelectProps = {
-    onChange?: (event: ListEventType & { select: string }) => void
+    onChange?: (event: SelectEventType) => void
 } & SelectProps
 
 export type ReactSelectProps = {
-    onChange?: (event: ListEventType & { select: string }) => void
+    onChange?: (event: SelectEventType) => void
 } & SelectProps