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


#1

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?

Thanks.


#2

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.


#3

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


#4

Something like:

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

  render() {
    return (
      <Page>
        {/* ... */}

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

#5

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

      <List>
        <ListItem
          title={RootScope.t['Choose city']}
          smartSelect
          smartSelectParams={
            { 
              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: e.target.value, index, after_key_station})}>
            <option value="">{RootScope.t['Choose']}</option>
            {CitiesRender()}
          </select>
        </ListItem>
      </List>
      <p className="mb-4">
        <Button fill color="black" onClick={() => self.setState({addCityAfterIndex: null, addCityAfterKeyStation: null})}>
          {RootScope.t['Cancel']}
        </Button>
      </p>

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.


#6

If you just need to open smart select from other element click, then just use app.smartSelect.open f7 method https://framework7.io/docs/smart-select.html#smart-select-app-methods


#7

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?

Thanks.


#8

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