Skip to content

Throws error when sanitise is a function #72

@jesstelford

Description

@jesstelford
    TypeError: Cannot read property 'rangeCount' of undefined

      85 |
      86 |   getRange () {
    > 87 |     return this.selection.rangeCount ? this.selection.getRangeAt(0) : document.createRange();
         |                           ^
      88 |   }
      89 |
      90 |   getCaret() {

      at ContentEditable.rangeCount [as getRange] (src/react-sane-contenteditable.js:87:27)
      at ContentEditable.getRange [as sanitiseValue] (src/react-sane-contenteditable.js:141:35)
      at new sanitiseValue (src/react-sane-contenteditable.js:52:19)

When calling it like so:

<ContentEditable content="Foobar" sanitise={() => {}} />

It looks like this is happening because this.selection is set in the constructor after it is used within this.sanitiseValue() > this.getRange():

https://github.com/ashleyw/react-sane-contenteditable/blob/master/src/react-sane-contenteditable.js#L52-L56

EDIT: Here's a unit test which shows the failure:

  it('calls sanitise function on mount', () => {
    const content = 'foo';
    const sanitise = jest.fn(value => value);
    const wrapper = mount(<ContentEditable content={content} sanitise={sanitise} />);

    expect(sanitise).toHaveBeenCalledWith(content, mockedRange);
  });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions