Searchbar Doesn't Work within React State

[faraz]

I’m trying to use the Searchbar component and have it load data from an API, but it looks like the component doesn’t work at all if its ever rendered from a set state change.

Here’s the repo that replicates the bug:

fny/bugreports-framework7

The code below, for example, does not render the search bar at all, only the list after the toggle button is clicked:

export default class extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loaded: false
    }
  }
  render() {

    if (this.state.loaded) {
      return <Page>
      <Navbar title="Dynamic Searchbar"  backLink="Back">
        <Subnavbar inner={false}>
          <Searchbar
            searchContainer=".search-list"
            searchIn=".item-title"
          ></Searchbar>
        </Subnavbar>
      </Navbar>
      <List className="searchbar-not-found">
        <ListItem title="Nothing found" />
      </List>
      <List className="search-list searchbar-found">
        <ListItem title="Acura" />
        <ListItem title="Audi" />
        <ListItem title="BMW" />
        <ListItem title="Cadillac " />
        <ListItem title="Chevrolet " />
        <ListItem title="Chrysler " />
        <ListItem title="Dodge " />
        <ListItem title="Ferrari " />
        <ListItem title="Ford " />
        <ListItem title="GMC " />
        <ListItem title="Honda" />
        <ListItem title="Hummer" />
        <ListItem title="Hyundai" />
      </List>
      </Page>
    }

    return <Page>
      <Button onClick={() => this.setState({loaded: true}) }>Load</Button>
    </Page>

  }
}

If the same list is rendered without depending on this.set.state, it does render as expected:

import React from 'react';
import { Page, Navbar, Block, BlockTitle, Subnavbar, Searchbar, List, ListItem } from 'framework7-react';

export default class extends React.Component {
  render() {
    return <Page>
      <Navbar title="Static Searchbar"  backLink="Back">
        <Subnavbar inner={false}>
          <Searchbar
            searchContainer=".search-list"
            searchIn=".item-title"
          ></Searchbar>
        </Subnavbar>
      </Navbar>
      <List className="searchbar-not-found">
        <ListItem title="Nothing found" />
      </List>
      <List className="search-list searchbar-found">
        <ListItem title="Acura" />
        <ListItem title="Audi" />
        <ListItem title="BMW" />
        <ListItem title="Cadillac " />
        <ListItem title="Chevrolet " />
        <ListItem title="Chrysler " />
        <ListItem title="Dodge " />
        <ListItem title="Ferrari " />
        <ListItem title="Ford " />
        <ListItem title="GMC " />
        <ListItem title="Honda" />
        <ListItem title="Hummer" />
        <ListItem title="Hyundai" />
      </List>
    </Page>
  }
}

[RaddishIoW]

I’m getting a similar thing with my app… I have a subnavbar that has content which is rendered conditionally - in my case, different content based on whether f7.online is true or false.
The subnavbar just doesn’t render at all, regardless of the result of the boolean.

[willowdigit]

Put Page slot ‘fixed’ on the navbar

[willowdigit]

So I experienced this issue again using React with code as below:

<Page>
  <Navbar>
      <NavLeft backLink="Back" />
      <NavTitle>{props.label}</NavTitle>                    
      {   
         mode === 'search' ?
            <Subnavbar inner={false}>
               <Searchbar />
            </Subnavbar> :
             null
      }
  </Navbar>
  ...
</Page>

I fixed it by adding the withSubnavbar property on Page, ie

<Page withSubnavbar>