Skip to content

Bug in util.js causes "Error: lockOffset value should be a finite. Given NaN" when lockToContainerEdges is used #197

@cbcf

Description

@cbcf

Symptom:
When using lockToContainerEdges on the SlickList (or ContainerMixin), the library throws an error:
Error: lockOffset value should be a finite. Given NaN
This happens without setting lockOffset or when setting it to a single pixel or percent value.

Cause:
The getLockPixelOffset function receives a NaN due to a bug in the getLockPixelOffsets function.
Any string for lockOffset is always forcedly converted to a number (using the unary + operator):

if (typeof lockOffset == 'string') {
    lockOffset = +lockOffset;
}

If the string is not a pure number, it is converted to NaN. The result is passed on to the getLockPixelOffset function, which in turn has actual code to handle strings with a px or % suffix. Accordingly, as the default value used for lockOffset is "50%", this also converts to NaN and causes the error.

Suggested fix:
Remove the invalid and redundant string-to-number conversion shown above and also correct the associated type annotations. I will add a PR addressing this.

Workaround for now:
Explicitly set lockOffset to an array of strings when using lockToContainerEdges.
For example, to get the expected behavior of the default value of 50% for lockOffset, explitcitly set it to `['50%', '50%'], e.g.:

<SlickList lock-to-container-edges :lock-offset="['50%', '50%']" ...>

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