Semantic-UI-React icon indicating copy to clipboard operation
Semantic-UI-React copied to clipboard

Dropdown items lazy loading

Open ungarson opened this issue 6 months ago • 1 comments

Bug Report

Steps

Use Dropdown with item content, for example:

import React from 'react'
import { Dropdown, Header } from 'semantic-ui-react'

const options = [
  {
    key: 1,
    text: 'Mobile',
    value: 1,
    content: (
      <Header icon='mobile' content='Mobile' subheader='The smallest size' />
    ),
  },
  {
    key: 2,
    text: 'Tablet',
    value: 2,
    content: (
      <Header
        icon='tablet'
        content='Tablet'
        subheader='The size in the middle'
      />
    ),
  },
  {
    key: 3,
    text: 'Desktop',
    value: 3,
    content: (
      <Header icon='desktop' content='Desktop' subheader='The largest size' />
    ),
  },
]

const DropdownExampleItemContent = () => (
  <Dropdown selection fluid options={options} placeholder='Choose an option' />
)

export default DropdownExampleItemContent

Expected Result

Header Icons would load after Dropdown is open

Actual Result

Header Icons load with Dropdown, it is a problem because sometimes we might have a lot of options and there'd be a lot of unneeded requests

Version

3.0.0-beta.2

ungarson avatar Jun 12 '25 09:06 ungarson