Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Timeline constructor throws error when using option verticalScroll:true #1805

Open
0cnLaroche opened this issue Jun 1, 2024 · 0 comments
Open

Comments

@0cnLaroche
Copy link

The Timeline constructor is throwing an error when I use the verticalScroll option to true. Error is Cannot read properties of null (reading 'left') while trying to read this.dom.left internally. As a work around, if I set the this.options.verticalScroll to true after initialization, it works fine.

Here is my code and options to reproduce.

import {
  Timeline as VisTimeline,
  TimelineOptions,
} from "vis-timeline";

const DEFAULT_TIMELINE_OPTIONS: TimelineOptions = {
  align: "center",
  groupHeightMode: "fitItems",
  autoResize: true,
  clickToUse: false,
  editable: true,
  groupEditable: false,
  stack: true,
  type: "range",
  zoomable: false,
  showCurrentTime: false,
  horizontalScroll: true,
  orientation: {
    axis: "top",
  },
  margin: {
    item: 20,
    axis: 20,
  },
  start: moment().startOf("month").startOf("week").isoWeekday(1).toDate(),
  verticalScroll: true, // Crashes when true 
};

class Timeline extends React.Component<Props, {}> {
  timeline!: Readonly<VisTimeline>;
  items: DataSetDataItem;
  groups: DataSetDataGroup;
  options: TimelineOptions;

  timelineRef = React.createRef<HTMLDivElement>();

  constructor(props: Props) {
    super(props);

    this.items = new DataSet(props.items);
    this.groups = new DataSet(props.groups);
    this.options = { ...DEFAULT_TIMELINE_OPTIONS, ...props.options };
  }

  componentDidMount(): void {
    if (this.timelineRef.current) {
      this.timeline = new VisTimeline(
        this.timelineRef.current,
        this.items,
        this.groups,
        this.options,
      );
    }
  }
// ...
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant