why not

mui · Sep 14, 2023 · 728e2f0 · 728e2f0
1 parent 2bd95c5
commit 728e2f0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 30 deletions.
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
@@ -8,7 +8,16 @@ import { styled } from '@mui/system';
 
 export default function UnstyledSelectCustomRenderValue() {
   return (
-    <CustomSelect renderValue={renderValue} placeholder="Select an option…">
+    <CustomSelect
+      defaultValue={10}
+      renderValue={(option) => {
+        if (option == null || option.value === null) {
+          return 'Select an option…';
+        }
+        return `${option.label} (${option.value})`;
+      }}
+    >
+      <StyledOption value={null}>None</StyledOption>
       <StyledOption value={10}>Ten</StyledOption>
       <StyledOption value={20}>Twenty</StyledOption>
       <StyledOption value={30}>Thirty</StyledOption>
@@ -40,18 +49,6 @@ CustomSelect.propTypes = {
   }),
 };
 
-function renderValue(option) {
-  if (option == null) {
-    return null;
-  }
-
-  return (
-    <span>
-      {option.label} ({option.value})
-    </span>
-  );
-}
-
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',

diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
@@ -7,10 +7,19 @@ import { styled } from '@mui/system';
 
 export default function UnstyledSelectCustomRenderValue() {
   return (
-    <CustomSelect renderValue={renderValue} placeholder="Select an option…">
+    <CustomSelect
+      defaultValue={10}
+      renderValue={(option: SelectOption<number> | null) => {
+        if (option == null || option.value === null) {
+          return 'Select an option…';
+        }
+        return `${option.label} (${option.value})`;
+      }}
+    >
+      <StyledOption value={null}>None</StyledOption>
       <StyledOption value={10}>Ten</StyledOption>
       <StyledOption value={20}>Twenty</StyledOption>
-      <StyledOption value={30}>Thirty</StyledOption>
+      <StyledOption value={30}>Thrity</StyledOption>
     </CustomSelect>
   );
 }
@@ -26,18 +35,6 @@ function CustomSelect(props: SelectProps<number, false>) {
   return <Select {...props} slots={slots} />;
 }
 
-function renderValue(option: SelectOption<number> | null) {
-  if (option == null) {
-    return null;
-  }
-
-  return (
-    <span>
-      {option.label} ({option.value})
-    </span>
-  );
-}
-
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',

diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx.preview b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx.preview
@@ -1,5 +1,14 @@
-<CustomSelect renderValue={renderValue} placeholder="Select an option…">
+<CustomSelect
+  defaultValue={10}
+  renderValue={(option: SelectOption<number> | null) => {
+    if (option == null || option.value === null) {
+      return 'Select an option…';
+    }
+    return `${option.label} (${option.value})`;
+  }}
+>
+  <StyledOption value={null}>None</StyledOption>
   <StyledOption value={10}>Ten</StyledOption>
   <StyledOption value={20}>Twenty</StyledOption>
   <StyledOption value={30}>Thirty</StyledOption>
-</CustomSelect>
+</CustomSelect>
diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md
@@ -219,7 +219,7 @@ For the sake of simplicity, demos and code snippets primarily feature components
 You can customize the appearance of the selected value display by providing a function to the `renderValue` prop.
 The element returned by this function will be rendered inside the Select's button.
 
-{{"demo": "UnstyledSelectCustomRenderValue.js", "defaultCodeOpen": false}}
+{{"demo": "UnstyledSelectCustomRenderValue.js"}}
 
 ### Option appearance