Is this possible to pop smart select without the List component?


I am using React + F7 V4.
I want to pop the Smart select page by the time the user clicks on a Button component - not a List and ListItem component.

Is this possible to pop the Smart select component and page using anyother component which is not the ListItem?



No, Smart Select is designed to be used with List only. But in React you can just add custom Popover/Popup/Sheet/etc. and open it on button click.


I am not sure I understand what you mean… Could you provide some example?


Something like:

export default class extends React.Component {
  constructor() {
    this.state = {
      popoverOpened: false,

  render() {
    return (
        {/* ... */}

        <Button onClick={() => this.setState({ popoverOpened: true })}>Open Popover</Button>
        <Popover opened={popoverOpened} onPopoverClose={() => this.setState({ popoverOpened: false })}>
            {/* List with required checkboxes */}
        {/* ... */}


In the List inside the Popover, do you implement the SmartSelect directly?
I have implemented there this:

          title={RootScope.t['Choose city']}
              openIn: 'page',
              searchbar: true,
              closeOnSelect: true,
              searchbarPlaceholder: `${RootScope.t['Search city']}...`,
              virtualList: true,
              searchbarDisableText: RootScope.t['Cancel']
          <select name="city" defaultValue="" onChange={(e) => AddExtraCityOrStop({self, extra: "city", city:, index, after_key_station})}>
            <option value="">{RootScope.t['Choose']}</option>
      <p className="mb-4">
        <Button fill color="black" onClick={() => self.setState({addCityAfterIndex: null, addCityAfterKeyStation: null})}>

But this didn’t work I still had to make one more click in order to open the SmartSelect view inside the Popover, and also the SmartSelect wasn’t stretched to full of the popover frame.

I want to directly launch the SmartSelect page/view by the time the user clicks on a Button, or basically just on anything I want.

This can make this component to be extremely useful.


If you just need to open smart select from other element click, then just use f7 method


How to do this? There is not explaination in the docs, either in React and in the Core.
I have tried lots of things.

Could you please show how to create and open using the component in React?



Sure, but first show live example or JSFiddle with what you are trying to achieve to get better understanding