Using Framework7 Smart Select for Grouped Single Selection

Quick answer

Framework7 Smart Select enhances a native <select> (or an input paired with a selectEl) by opening a popup list when the control is tapped. It supports optgroups for visual grouping, but does not provide hierarchical drill‑down navigation. The component works best with a few hundred options; for larger sets enable the built‑in virtual list to keep the UI responsive.

Worked example

Here is a minimal page that shows a grouped Smart Select for choosing a fruit or vegetable.

  
  Framework7 Smart Select demo
  


  
    
      
Choose an item:
      
        
          
          
          
        
        
          
          
          
        
      
    
  
  
  

How it works

• The <select> must have the class smart-select and data-open-in="popup" (or you can pass selectEl in the JS options).
• Framework7 reads the <option> elements and builds a list inside the popup. Optgroups become section headers.
• When the user taps an option, the native <select> value changes, the popup closes, and the smartSelectClose event fires.
• No special source or hierarchical data arrays are needed; the component works directly with the markup.

Performance considerations

Smart Select renders every <option> in the popup DOM. With a few hundred items the list remains usable, but scrolling can become sluggish on low‑end devices. To mitigate:

• Enable the built‑in virtual list: add virtualList: true to the creation options. This renders only the visible rows and recycles DOM nodes.
• If the option set changes frequently (e.g., filtered search), destroy and recreate the instance or call smartSelect.update() after modifying the <select>.

Common pitfalls and how to avoid them

• Using an <input> instead of a <select> – Smart Select expects a select element (or the selectEl option). A plain text input will not open a popup.
• Missing optgroup labels – Without optgroups the list appears flat; ensure each <optgroup> has a label attribute if you want grouped headers.
• Failing to initialize after the DOM is ready – If the script runs before the <select> exists, the instance will not bind. Wrap initialization in DOMContentLoaded or place the script at the end of <body>.
• Assuming hierarchical drill‑down – Smart Select does not support nested lists with a back button. For true hierarchy you need a different approach (e.g., a Panel with nested lists or a custom popup).
• Updating options without notifying the component – After adding or removing <option> elements, call smartSelect.update() to refresh the popup list, or destroy and recreate the instance.

Verification checklist

1. Open the page in a browser and tap the select. A popup with the optgroup headers and options should appear.
2. Choose an option; the popup closes and the select’s displayed value updates.
3. Open the browser console; no Framework7 warnings should be visible.
4. If you added virtualList: true, inspect the popup in DevTools and verify that only a subset of option elements are present in the DOM while scrolling.
5. For dynamic data, modify the <select> (add/remove options), then call smartSelect.update() and confirm the popup reflects the changes.