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

Questions
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

9

Sorry for late reply.

I have added to some test component in the componentDidMount, the next code:

let smartSelect = app.smartSelect.create({
  el: ".testSmartSelect",
  openIn: "page"
});

And in the same component’s render I have added this:

<select className="testSmartSelect">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

Later I did:

smartSelect.open();

But this didn’t work, and either I don’t want to put the tag directly in the HTML - what I am trying to achieve is that the Smart select data will be implemented programmatically in the smartSelect.create method, for example something like this:

let options = [ { id: "A", value: "A"}, {id: "B", value: "B"} ... ];

let smartSelect = app.smartSelect.create({
  el: ".testSmartSelect",
  openIn: "page",
  options: myOptions
});

This could be the best if this would be worked like I wrote above. In such a way I could attach the event to binded to Button element or something else.

This could even be much much better and makes F7 to be the boss of all frameworks if it could be added async, something like this:

let smartSelect = app.smartSelect.create({
  el: ".testSmartSelect",
  openIn: "page",
  options: myOptions
});

smartSelect.open();

setTimeout(() => smartSelect.options(newOptionsFromAsync).process(), 10000 );
// new options will be implemented after 10s.

The process means to re-render those new options.

There could be even better better better if it had images or captions in the options array object.
I really love F7, hope Smart Select could be more dynamic. I hope it helped.