SPFX PNP ListView fails to load on page if it is hided and showed back again on the Modern page

Question

I have List View which i placed in the render part, page load i am hiding it via j query inside a div and when i show it back no data appears on it, but if i click on Developer tools it starts appearing or if i change the resolution of the screen it starts appearing. This is strange.

<ListView
items={this.state.supplierContractItems.slice(this.state.supplierContractRare, this.state.supplierContractFront + 1)}
showFilter={this.state.showFilters}
viewFields={this.state.supplierContractViewFields}
selectionMode={SelectionMode.multiple}
selection={this.getSupplierContractSelection}
filterPlaceHolder="Search..." />

Answer 1

I could not reproduce your issue.I use JS to hide div directly.

My test code:

export default class ReactGetListItemsAddtoSelectTag extends React.Component<IReactGetListItemsAddtoSelectTagProps, any> {
  public constructor(props) {
    super(props);
    this.state = {               
      items:[]
    };
  }
  public render(): React.ReactElement<IReactGetListItemsAddtoSelectTagProps> {
    
    const viewFields: IViewField[] = [{  
      name: "Title",  
      displayName: "Title",  
      isResizable: true,  
      sorting: true,  
      minWidth: 0,  
      maxWidth: 150  
    },  
    {  
      name: "ID",  
      displayName: "ID",  
      isResizable: true,  
      sorting: true,  
      minWidth: 0,  
      maxWidth: 200  
    }];  
    return (
      <div className={ styles.reactGetListItemsAddtoSelectTag }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>                
          </div>
          <div id="test">
          <ListView
  items={this.state.items}
  viewFields={viewFields}
  iconFieldName="ServerRelativeUrl"
  compact={true}
  selectionMode={SelectionMode.multiple}
  selection={this._getSelection}
  showFilter={true}
  
  filterPlaceHolder="Search..."
   />
   </div>
   <input type="button" value="change" onClick={this.handle}/>
        </div>
      </div>
    );
  }

  handle(){
    var div=document.getElementById("test");
    var style=div.getAttribute("style");
    
    if(!style){
    div.setAttribute("style","display:none");
  }else{
    div.removeAttribute("style");
  }
  }
  componentDidMount(){            
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);        
    web.lists.getByTitle("testn").items.top(5).get().then(items=>{
      console.log(items)
      this.setState({items})});
    
  }
  private _getSelection(items: any[]) {
    console.log('Items:', items);
  }
}

My test result:

Updated:

componentDidMount() {
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);
    web.lists.getByTitle("testn").items.top(5).get().then(items => {
      console.log(items)
      this.setState({ items })
    });
   
    setTimeout(()=>$("#listView_id").hide(),2000);
   
  }

Answer 2

FIRSTLY THANKS A LOT  TO INVESTIGATE ON THIS, JUST TRY THE BELOW CODE, THIS WILL FIRST HIDE THE LIST VIEW ON PAGE LOAD AND THEN BUTTON IS CLICKED TO SHOW BACK, IT ONLY SHOWS THE SEARCH BUTTON NOT THE RESULT, BUT JUST IF YOU`enter code here` CHANGE THE RESOLUTION OF THE SCREEN BY PRESSING CTRL + Mouse wheel up/down the result will show automatically. 


  export default class Reacttest extends React.Component<IReacttestProps, IHelloWorldState, {}> {

  constructor(props: IReacttestProps) {

    super(props)

    this.state = {
      items: [],
      selecteduser: []
    };

    sp.setup({
      spfxContext: this.props.context
    });

    this.handle = this.handle.bind(this);
  }





  public render(): React.ReactElement<IReacttestProps> {
const viewFields: IViewField[] = [{
      name: "Title",
      displayName: "Title",
      isResizable: true,
      sorting: true,
      minWidth: 0,
      maxWidth: 150
    },
    {
      name: "ID",
      displayName: "ID",
      isResizable: true,
      sorting: true,
      minWidth: 0,
      maxWidth: 200
    }];
    return (
      <div >
        <span id="listView_id">
          <ListView
            items={this.state.items}
            viewFields={viewFields}
            iconFieldName="ServerRelativeUrl"
            compact={true}
            selectionMode={SelectionMode.multiple}
            selection={this._getSelection}
            showFilter={true}
            filterPlaceHolder="Search..."
          />
        </span>
        <span>  <input type="button" value="Click To Show" onClick={this.handle} /></span>
      </div>
    );
  }
  componentDidMount() {
    sp.web.lists.getByTitle("People").items.top(5).get().then(items => {
      console.log(items)
      this.setState({ items })
    });
    $("#listView_id").hide();
  }
  private handle() {
    $("#listView_id").show();
  }
  private _getSelection(items: any[]) {
    console.log('Items:', items);
  }
}