What causes "Smart Select requires initialized View" in framework7io/framework7?

Initialize the View before creating the Smart Select: `const view = app.views.create('.view-main')`, so the ancestor `.view` has `.f7View` set.

framework7io/framework7 · error · Error

Smart Select requires initialized View

Error message

Smart Select requires initialized View

What it means

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'.

Source

Thrown at src/core/components/smart-select/smart-select-class.js:244

    ss.$selectEl.trigger('change');
  }

  getValue() {
    const ss = this;
    return ss.$selectEl.val();
  }

  get view() {
    const { params, $el } = this;
    let view;
    if (params.view) {
      view = params.view;
    }
    if (!view) {
      view = $el.parents('.view').length && $el.parents('.view')[0].f7View;
    }
    if (!view && params.openIn === 'page') {
      throw Error('Smart Select requires initialized View');
    }
    return view;
  }

  checkMaxLength() {
    const ss = this;
    const $containerEl = ss.$containerEl;
    if (ss.selectEl.selectedOptions.length >= ss.maxLength) {
      $containerEl.find('input[type="checkbox"]').each((inputEl) => {
        if (!inputEl.checked) {
          $(inputEl).parents('li').addClass('disabled');
        } else {
          $(inputEl).parents('li').removeClass('disabled');
        }
      });
    } else {
      $containerEl.find('.disabled').removeClass('disabled');
    }

View on GitHub (pinned to 6557591266)

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).

Example fix

// before
app.smartSelect.create({ el: '.my-select', openIn: 'page' }); // throws: no view
// after
const view = app.views.create('.view-main');
app.smartSelect.create({ el: '.my-select', view: view, openIn: 'page' });

Defensive patterns

Strategy: try-catch

Validate before calling

function canUsePageMode(app, el) {
  const $el = app.$(el);
  const hasView = !!app.views.main || ($el.parents('.view').length && $el.parents('.view')[0].f7View);
  return hasView;
}
// before create: openIn = canUsePageMode(app, el) ? 'page' : 'popup';

Type guard

function hasInitializedView(app) {
  return !!(app && app.views && app.views.main && app.views.main.router);
}

Try / catch

try {
  ss = app.smartSelect.create({ el: '.my-select', openIn: 'page' });
} catch (e) {
  if (e.message === 'Smart Select requires initialized View') {
    ss = app.smartSelect.create({ el: '.my-select', openIn: 'popup' });
  } else throw e;
}

Prevention

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.

When it happens

Trigger: 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`.

Common situations: 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'`.

Related errors

AI-assisted analysis of framework7io/framework7@6557591266 (2026-09-02). Data as JSON: /api/errors/58cb65d118c6544a. Report an issue: GitHub.