fix(api-reference): value in requeste example code block (scalar#6284)

* fix: value in request example + dropdown

* docs(changeset): fix: value in request example code

* fix: tests

* fix: add checkbox back in

* fix: test

Author: amritk

.changeset/bright-numbers-report.md

@@ -0,0 +1,5 @@
+---
+'@scalar/api-reference': patch
+---
+
+fix: value in request example code

packages/api-reference/src/features/example-responses/ExampleResponses.vue

@@ -32,8 +32,6 @@ const id = useId()
 
 const { copyToClipboard } = useClipboard()
 
-const selectedExampleKey = ref<string>('')
-
 // Bring the status codes in the right order.
 const orderedStatusCodes = computed(() => Object.keys(responses ?? {}).sort())
 
@@ -74,6 +72,10 @@ const currentJsonResponse = computed(() => {
   )
 })
 
+const selectedExampleKey = ref<string>(
+  Object.keys(currentJsonResponse.value.examples ?? {})[0] ?? '',
+)
+
 /**
  * Gets the first example response if there are multiple example responses
  * or the only example if there is only one example response.

packages/api-reference/src/v2/blocks/scalar-request-example-block/components/ExamplePicker.test.ts

@@ -32,26 +32,20 @@ describe('ExamplePicker', () => {
     })
 
     expect(wrapper.find('[data-testid="example-picker"]').exists()).toBe(true)
-    expect(wrapper.text()).toContain('First Example')
+    expect(wrapper.text()).toContain('Select an example')
   })
 
-  it('generates correct options from examples', () => {
+  it('renders dropdown button with correct text', () => {
     const wrapper = mount(ExamplePicker, {
       props: {
         examples: mockExamples,
         modelValue: '',
       },
     })
 
-    const combobox = wrapper.findComponent({ name: 'ScalarCombobox' })
-    const options = combobox.props('options')
-
-    expect(options).toHaveLength(3)
-    expect(options).toEqual([
-      { id: 'example-1', label: 'First Example' },
-      { id: 'example-2', label: 'Second Example' },
-      { id: 'example-3', label: 'example-3' }, // Falls back to key when no summary
-    ])
+    const button = wrapper.find('[data-testid="example-picker"]')
+    expect(button.exists()).toBe(true)
+    expect(button.text()).toContain('Select an example')
   })
 
   it('handles empty examples object', () => {
@@ -62,10 +56,6 @@ describe('ExamplePicker', () => {
       },
     })
 
-    const combobox = wrapper.findComponent({ name: 'ScalarCombobox' })
-    const options = combobox.props('options')
-
-    expect(options).toHaveLength(0)
     expect(wrapper.text()).toContain('Select an example')
   })
 
@@ -84,10 +74,8 @@ describe('ExamplePicker', () => {
       },
     })
 
-    const combobox = wrapper.findComponent({ name: 'ScalarCombobox' })
-    const options = combobox.props('options')
-
-    expect(options).toEqual([{ id: 'key-only', label: 'key-only' }])
+    // The button should show "Select an example" when no example is selected
+    expect(wrapper.text()).toContain('Select an example')
   })
 
   it('handles null key in getLabel function', () => {
@@ -110,40 +98,41 @@ describe('ExamplePicker', () => {
       },
     })
 
-    // Initially no example selected
-    expect(wrapper.text()).toContain('First Example')
+    // Initially shows "Select an example"
+    expect(wrapper.text()).toContain('Select an example')
 
     // Set a selected example
     await wrapper.setProps({
       examples: mockExamples,
       modelValue: 'example-1',
     })
 
-    // Simulate model update
-    const combobox = wrapper.findComponent({ name: 'ScalarCombobox' })
-    await combobox.vm.$emit('update:modelValue', { id: 'example-2', label: 'Second Example' })
-
     await nextTick()
 
     // The button should now show the selected example
-    expect(wrapper.text()).toContain('Second Example')
+    expect(wrapper.text()).toContain('First Example')
   })
 
-  it('emits model update when example is selected', async () => {
+  it('updates model value when example is selected', async () => {
     const wrapper = mount(ExamplePicker, {
       props: {
         examples: mockExamples,
         modelValue: '',
       },
     })
 
-    const combobox = wrapper.findComponent({ name: 'ScalarCombobox' })
-    const selectedOption = { id: 'example-2', label: 'Second Example' }
+    // Initially no example selected
+    expect(wrapper.vm.selectedExampleKey).toBe('')
+
+    // Update the model value directly
+    await wrapper.setProps({
+      examples: mockExamples,
+      modelValue: 'example-2',
+    })
 
-    await combobox.vm.$emit('update:modelValue', selectedOption)
+    await nextTick()
 
-    // Verify the selectExample method was called with the correct option
-    // This tests the internal logic of the component
+    // Verify the selectedExampleKey was updated
     expect(wrapper.vm.selectedExampleKey).toBe('example-2')
   })
 
@@ -170,44 +159,33 @@ describe('ExamplePicker', () => {
       },
     })
 
-    const combobox = wrapper.findComponent({ name: 'ScalarCombobox' })
-    const options = combobox.props('options')
-
-    expect(options).toEqual([
-      { id: 'example-with-dashes', label: 'Dashed Example' },
-      { id: 'example_with_underscores', label: 'Underscore Example' },
-      { id: 'example.with.dots', label: 'Dotted Example' },
-    ])
+    // Test that getLabel works with special characters
+    expect(wrapper.vm.getLabel('example-with-dashes')).toBe('Dashed Example')
+    expect(wrapper.vm.getLabel('example_with_underscores')).toBe('Underscore Example')
+    expect(wrapper.vm.getLabel('example.with.dots')).toBe('Dotted Example')
   })
 
-  it('computes selected example correctly', () => {
+  it('shows correct label for selected example', () => {
     const wrapper = mount(ExamplePicker, {
       props: {
         examples: mockExamples,
-        modelValue: '',
+        modelValue: 'example-1',
       },
     })
 
-    const vm = wrapper.vm
-
-    // Test when an example is selected
-    vm.selectedExampleKey = 'example-1'
-    expect(vm.selectedExample).toEqual({
-      id: 'example-1',
-      label: 'First Example',
-    })
+    // Should show the summary when available
+    expect(wrapper.text()).toContain('First Example')
 
-    vm.selectedExampleKey = 'example-2'
-    expect(vm.selectedExample).toEqual({
-      id: 'example-2',
-      label: 'Second Example',
+    // Test with example that has no summary
+    const wrapper2 = mount(ExamplePicker, {
+      props: {
+        examples: mockExamples,
+        modelValue: 'example-3',
+      },
     })
 
-    vm.selectedExampleKey = 'example-3'
-    expect(vm.selectedExample).toEqual({
-      id: 'example-3',
-      label: 'example-3',
-    })
+    // Should fall back to the key when no summary
+    expect(wrapper2.text()).toContain('example-3')
   })
 
   it('handles examples with null or undefined values', () => {
@@ -223,13 +201,22 @@ describe('ExamplePicker', () => {
       },
     })
 
-    const combobox = wrapper.findComponent({ name: 'ScalarCombobox' })
-    const options = combobox.props('options')
+    // Should handle null/undefined gracefully in getLabel
+    expect(wrapper.vm.getLabel('null-example')).toBe('null-example')
+    expect(wrapper.vm.getLabel('undefined-example')).toBe('undefined-example')
+  })
+
+  it('generates correct labels for all examples', () => {
+    const wrapper = mount(ExamplePicker, {
+      props: {
+        examples: mockExamples,
+        modelValue: '',
+      },
+    })
 
-    // Should handle null/undefined gracefully
-    expect(options).toEqual([
-      { id: 'null-example', label: 'null-example' },
-      { id: 'undefined-example', label: 'undefined-example' },
-    ])
+    // Test that getLabel generates correct labels for all examples
+    expect(wrapper.vm.getLabel('example-1')).toBe('First Example')
+    expect(wrapper.vm.getLabel('example-2')).toBe('Second Example')
+    expect(wrapper.vm.getLabel('example-3')).toBe('example-3') // Falls back to key when no summary
   })
 })

packages/api-reference/src/v2/blocks/scalar-request-example-block/components/ExamplePicker.vue

@@ -1,35 +1,19 @@
 <script setup lang="ts">
 import {
   ScalarButton,
-  ScalarCombobox,
-  type ScalarComboboxOption,
+  ScalarDropdown,
+  ScalarDropdownItem,
+  ScalarIcon,
 } from '@scalar/components'
 import { ScalarIconCaretDown } from '@scalar/icons'
 import type { ExampleObject } from '@scalar/workspace-store/schemas/v3.1/strict/example'
-import { computed } from 'vue'
 
 const props = defineProps<{
   examples: Record<string, ExampleObject>
 }>()
 
 const selectedExampleKey = defineModel<string>({ required: true })
 
-/** Generate the options for the combobox */
-const exampleOptions = computed<ScalarComboboxOption[]>(() => {
-  return Object.keys(props.examples).map((key) => ({
-    id: key,
-    label: getLabel(key),
-  }))
-})
-
-/** Get the currently selected example */
-const selectedExample = computed<ScalarComboboxOption>(
-  () =>
-    exampleOptions.value.find(
-      (option) => option.id === selectedExampleKey.value,
-    ) ?? exampleOptions.value[0],
-)
-
 /** Generate label for an example */
 const getLabel = (key: string | null) => {
   if (!key) {
@@ -41,33 +25,46 @@ const getLabel = (key: string | null) => {
 }
 
 /** Handle example selection */
-const selectExample = (option: ScalarComboboxOption) => {
-  selectedExampleKey.value = option.id
+const selectExample = (key: string) => {
+  selectedExampleKey.value = key
 }
 
 // For testing
 defineExpose({
   getLabel,
-  selectedExample,
   selectedExampleKey,
 })
 </script>
 
 <template>
-  <ScalarCombobox
-    class="max-h-80"
-    :modelValue="selectedExample"
-    :options="exampleOptions"
-    teleport
-    placement="bottom-start"
-    @update:modelValue="selectExample">
+  <ScalarDropdown placement="bottom-start">
     <ScalarButton
       data-testid="example-picker"
       class="text-c-1 hover:bg-b-2 flex h-full w-fit gap-1.5 px-1.5 py-0.75 font-normal"
       fullWidth
       variant="ghost">
-      <span>{{ selectedExample?.label || 'Select an example' }}</span>
+      <span>{{ getLabel(selectedExampleKey) }}</span>
       <ScalarIconCaretDown />
     </ScalarButton>
-  </ScalarCombobox>
+    <template #items>
+      <ScalarDropdownItem
+        v-for="(_, key) in examples"
+        :key="key"
+        @click="selectExample(key)">
+        <div
+          class="flex h-4 w-4 items-center justify-center rounded-full p-[3px]"
+          :class="
+            selectedExampleKey === key
+              ? 'bg-c-accent text-b-1'
+              : 'shadow-border text-transparent'
+          ">
+          <ScalarIcon
+            class="size-2.5"
+            icon="Checkmark"
+            thickness="3" />
+        </div>
+        <span class="overflow-hidden text-ellipsis">{{ getLabel(key) }}</span>
+      </ScalarDropdownItem>
+    </template>
+  </ScalarDropdown>
 </template>

packages/api-reference/src/v2/blocks/scalar-request-example-block/components/RequestExample.vue

@@ -88,6 +88,7 @@ import type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-met
 import { ScalarIconCaretDown } from '@scalar/icons'
 import type { XCodeSample } from '@scalar/openapi-types/schemas/extensions'
 import { type AvailableClients } from '@scalar/snippetz'
+import type { ExampleObject } from '@scalar/workspace-store/schemas/v3.1/strict/example'
 import type { OperationObject } from '@scalar/workspace-store/schemas/v3.1/strict/path-operations'
 import type { SecuritySchemeObject } from '@scalar/workspace-store/schemas/v3.1/strict/security-scheme'
 import type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/server'
@@ -196,6 +197,11 @@ const generatedCode = computed<string>(() => {
       )
     }
 
+    const selectedExample =
+      operationExamples.value[selectedExampleKey.value || '']
+    const example =
+      (selectedExample as ExampleObject)?.value ?? selectedExample?.summary
+
     return generateCodeSnippet({
       clientId: localSelectedClient.value.id as AvailableClients[number],
       operation,
@@ -204,7 +210,7 @@ const generatedCode = computed<string>(() => {
       securitySchemes,
       contentType: selectedContentType,
       path,
-      example: operationExamples.value[selectedExampleKey.value || ''],
+      example,
     })
   } catch (error) {
     console.error('[generateSnippet]', error)