renderOnScroll causing bug

[Jaaneek]

FlatList Version :1.4.3

Describe the bug : Enabling renderOnScroll throws error when searchTerm doesnt match any elements Steps to reproduce the behavior : Set renderOnScroll to true search props:

search={{
            by: ["title", "message"],
            term: searchTerm,
            caseInsensitive: true,
          }}

Render around 400 elements. set searchTerm to something like "8218132873873nrui3" so that it wont match anything. set searchTerm to something that will match a few elements.

Expected behavior :after a short moment error will appear: TypeError: Cannot set property 'scrollTop' of null

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version:87.0.4280

Smartphone (please complete the following information):

• Device:
• OS:
• Browser:
• Version:

Screenshots

[ECorreia45]

Sorry for delay in noticing this. Working on a fix right away.

[ECorreia45]

@Jaaneek I was not able to reproduce this, can you provide me with more details, please?

• get me the full code of Flatlist component with all the props you are setting (even the full code of the file where you are using it if posible)
• give me all the errors you are seeing(you gave me error 1 of 2).
• step by step of what you did. I dont believe this has to do with the search because one of the requirements of renderOnScroll is that there must be a non-empty list and you must not be using the pagination props. Please note the step by step.
• does the error appear right after you stop typing or some moments after?

[Jaaneek]

import React, { useEffect, useState } from "react";
import {
  Button,
  DialogActions,
  DialogTitle,
  TextField,
  useMediaQuery,
} from "@material-ui/core";
import { Dialog, DialogContent } from "@material-ui/core";
import styles from "../SettingsPage.module.scss";
import SingleEventContainer from "../../../EventComponents/SingleEventContainer/SingleEventContainer";
import UseIcsImport from "./UseIcsImport";
import { useMutation } from "react-apollo";
import ALL_EVENTS from "../../../ApolloQueries/ALL_EVENTS";
import ADD_EVENTS from "../../../ApolloQueries/ADD_EVENTS";
import FlatList from "flatlist-react";
import Checkbox from "@material-ui/core/Checkbox";
import { FormControlLabel } from "@material-ui/core";
const IcsImportButton = () => {
  const [isOpen, setIsOpen] = useState(false);
  const isMobile = useMediaQuery("(max-width: 767px)");
  return (
    <div className={styles.buttonLeftContainer}>
      <Button
        onClick={() => setIsOpen(true)}
        variant="contained"
        color="primary"
        className={styles.buttonLeft}
      >
        Import ICS file
      </Button>
      {isOpen && (
        <IcsImportDialog
          title="Import events"
          show={isOpen}
          handleClose={() => setIsOpen(false)}
          isMobile={isMobile}
        ></IcsImportDialog>
      )}
    </div>
  );
};

const IcsImportDialog = ({ show, handleClose, isMobile, title }) => {
  const [events] = UseIcsImport();
  const [addEvents] = useMutation(ADD_EVENTS);
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedEvents, setSelectedEvents] = useState([]);
  const saveEvents = () => {
    if (!selectedEvents.some((x) => x)) {
      handleClose();
      return;
    }
    const mappedEvents = events
      .map(({ type, title, message, date, invokeDates }) => {
        return {
          title,
          message,
          invokeDates,
          date,
          eventTypeName: type,
        };
      })
      .filter((_, ind) => selectedEvents[ind]);
    addEvents({
      variables: { events: mappedEvents },
      refetchQueries: [{ query: ALL_EVENTS }],
    });
    handleClose();
  };
  useEffect(() => {
    const transformedEvents = events.map(() => false);
    setSelectedEvents(transformedEvents);
  }, [events]);

  const renderEvent = (event, index) => {
    return (
      <SingleEventContainer
        key={String(event.date) + String(event.title)}
        checked={!!selectedEvents[index]}
        onCheckboxChange={(checkValue) => {
          const newselectedEvents = selectedEvents.map((val, valIndex) => {
            if (valIndex === index) {
              return checkValue;
            }
            return val;
          });
          setSelectedEvents(newselectedEvents);
        }}
        {...event}
      ></SingleEventContainer>
    );
  };

  return (
    <Dialog
      scroll="paper"
      open={show}
      onClose={handleClose}
      fullScreen={isMobile}
      fullWidth
    >
      <DialogTitle className={styles.icsModalTitle}>
        <TextField
          fullWidth
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="Seach events by title or message"
        ></TextField>
        <FormControlLabel
          className={styles.allEventsCheckbox}
          control={
            <Checkbox
              onChange={({ target: { checked: checkValue } }) => {
                setSelectedEvents(selectedEvents.map(() => checkValue));
              }}
              color="primary"
              name="Select all events checkbox"
            ></Checkbox>
          }
          labelPlacement="start"
          label="Select All"
        ></FormControlLabel>
      </DialogTitle>
      <DialogContent dividers className={styles.contentContainer}>
        <FlatList
          search={{
            by: ["title", "message"],
            term: searchTerm,
            caseInsensitive: true,
          }}
          list={events}
          renderItem={renderEvent}
          renderWhenEmpty={() => <div>List is empty!</div>}
          sortBy={["date"]}
          renderOnScroll
          srollToTop={false}
        />
      </DialogContent>
      <DialogActions>
        <Button variant="text" color="default" onClick={handleClose}>
          Close
        </Button>
        <Button variant="contained" color="primary" onClick={saveEvents}>
          Save Changes
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default IcsImportButton;

Error appears after some moment, the list is not empty but after providing searchTerm that doesnt match any of the elements it doesnt show anything just as supposed. It shouldnt show error because of that right?

[ECorreia45]

No you are correct. Ill retests using the cocktail of options as you have them and get back to you.

[ECorreia45]

Seems like this issue was fixed in this commit:

https://github.com/ecorreiadev/flatlist-react/commit/0acaa816c343da56578a2e2f209d1f686bb6e82c

in release 1.5.0

I will keep this issue opened until the next release and let you know about it.

Thank you

[details of the bug] This is happening because in between the next browser paint and the list update(on search) the list is no longer rendered (due to no match) then when the code executes on the paint after there is no element to assign the scrollTop to (as the error says)