{"record":{"id":"58cb65d118c6544a","repo":"framework7io/framework7","slug":"smart-select-requires-initialized-view","errorCode":null,"errorMessage":"Smart Select requires initialized View","messagePattern":"Smart Select requires initialized View","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/core/components/smart-select/smart-select-class.js","lineNumber":244,"sourceCode":"    ss.$selectEl.trigger('change');\n  }\n\n  getValue() {\n    const ss = this;\n    return ss.$selectEl.val();\n  }\n\n  get view() {\n    const { params, $el } = this;\n    let view;\n    if (params.view) {\n      view = params.view;\n    }\n    if (!view) {\n      view = $el.parents('.view').length && $el.parents('.view')[0].f7View;\n    }\n    if (!view && params.openIn === 'page') {\n      throw Error('Smart Select requires initialized View');\n    }\n    return view;\n  }\n\n  checkMaxLength() {\n    const ss = this;\n    const $containerEl = ss.$containerEl;\n    if (ss.selectEl.selectedOptions.length >= ss.maxLength) {\n      $containerEl.find('input[type=\"checkbox\"]').each((inputEl) => {\n        if (!inputEl.checked) {\n          $(inputEl).parents('li').addClass('disabled');\n        } else {\n          $(inputEl).parents('li').removeClass('disabled');\n        }\n      });\n    } else {\n      $containerEl.find('.disabled').removeClass('disabled');\n    }","sourceCodeStart":226,"sourceCodeEnd":262,"githubUrl":"https://github.com/framework7io/framework7/blob/655759126686766530a027b2f8f369c991d63d1c/src/core/components/smart-select/smart-select-class.js#L226-L262","documentation":"Framework7's Smart Select can render either as a popup/sheet/dialog or as a full page. Page-mode navigation requires the app View instance to push the page onto; when `openIn: 'page'` is set and no View can be resolved (from `params.view` or the element's ancestor `.view` with `f7View`), the constructor throws 'Smart Select requires initialized View'.","triggerScenarios":"Creating a Smart Select with `openIn: 'page'` on an element not inside an initialized `.view` (no `.view` ancestor, or the ancestor's `.f7View` property is undefined because the View was never initialized via `new Framework7(...).views.create(...)`), and without passing `params.view`.","commonSituations":"Instantiating Smart Select on DOM detached from the app layout or inside a popup/modals layer outside any View; forgetting to initialize the View (only the `.view` div exists without `views.create`); auto-init running before the app Views are set up; copying a popup-mode Smart Select config and switching to `openIn: 'page'`.","solutions":["Initialize the View before creating the Smart Select: `const view = app.views.create('.view-main')`, so the ancestor `.view` has `.f7View` set.","Pass the View explicitly: `app.smartSelect.create({ el: '.my-select', view: app.views.main, openIn: 'page' })`.","If no View is available, change `openIn` to 'popup', 'sheet', or 'dropdown', which don't need a View.","Ensure auto-init runs after `views.create` (or init the Smart Select manually in the page's init event)."],"exampleFix":"// before\napp.smartSelect.create({ el: '.my-select', openIn: 'page' }); // throws: no view\n// after\nconst view = app.views.create('.view-main');\napp.smartSelect.create({ el: '.my-select', view: view, openIn: 'page' });","handlingStrategy":"try-catch","validationCode":"function canUsePageMode(app, el) {\n  const $el = app.$(el);\n  const hasView = !!app.views.main || ($el.parents('.view').length && $el.parents('.view')[0].f7View);\n  return hasView;\n}\n// before create: openIn = canUsePageMode(app, el) ? 'page' : 'popup';","typeGuard":"function hasInitializedView(app) {\n  return !!(app && app.views && app.views.main && app.views.main.router);\n}","tryCatchPattern":"try {\n  ss = app.smartSelect.create({ el: '.my-select', openIn: 'page' });\n} catch (e) {\n  if (e.message === 'Smart Select requires initialized View') {\n    ss = app.smartSelect.create({ el: '.my-select', openIn: 'popup' });\n  } else throw e;\n}","preventionTips":["Initialize Views (app.views.create) before any page-mode Smart Select.","Pass `view: app.views.main` explicitly when the element may sit outside a .view ancestor.","Only use openIn:'page' when a View is guaranteed; otherwise use popup/sheet.","Create Smart Selects in the page init event, after app layout and Views exist."],"tags":["framework7","smart-select","view-initialization","dom"],"backgroundTag":"view-not-initialized","analyzedSha":"655759126686766530a027b2f8f369c991d63d1c","analyzedAt":"2026-09-02T19:48:40.711Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}