Uncaught TypeError: Cannot read property 'clientWidth' of null
See original GitHub issueI make a dynamic scrollbar to load users in my project, it will call serverice to get more users every time when I scroll to the bottom like below code block.
constructor(props) {
super(props);
this.state = {
users: this.props.users ? [...this.props.users] : [],
isBusy: true
};
this.lastScrollTop = 0;
this.onScroll = this.onScroll.bind(this);
}
onScroll(evt) {
const scrollTop = evt.target.scrollTop;
const clientHeight = evt.target.clientHeight;
const scrollHeight = evt.target.scrollHeight;
if (clientHeight + scrollTop === scrollHeight) {
if (this.props.getUsers && this.hasNextPage) {
this.lastScrollTop = scrollTop;
this.props.getUsers(Id, this.pageIndex, this.state.searchText);
}
}
}
And in componentWillReceiveProps I update the users in state
componentWillReceiveProps(nextProps) {
if (this.props.users !== nextProps.users) {
let users = this.state.usersAndGroups.concat(nextProps.usersAndGroups);
this.setState({ users , isBusy: false });
}
}
Then in i will set the scrollbar to last scroll position
componentDidUpdate() {
if (this.scrollbar) {
this.scrollbar.scrollTop(this.lastScrollTop);
}
}
Then render it
<ScrollBar
style={{ width: '100%', height: '100%' }}
onScroll={this.onScroll}
ref={(scrollbar) => { this.scrollbar = scrollbar; }}>
<div>
{this.renderUserList(users)}
</div>
</ScrollBar>
All works well except it will throw below error in console when I scroll to the bottom to load next page users.
Uncaught TypeError: Cannot read property 'clientWidth' of null
at getInnerWidth
at Scrollbars._update
And in the callstack is that el is null when get clientWidth el.clientWidth, anyone konw reason?
function getInnerWidth(el) {
var clientWidth = el.clientWidth;
var _getComputedStyle = getComputedStyle(el),
paddingLeft = _getComputedStyle.paddingLeft,
paddingRight = _getComputedStyle.paddingRight;
return clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
}`
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:7
Top Results From Across the Web
Uncaught TypeError: Cannot read property 'clientWidth' of null
It returns width of browser viewport Which is equivalent or I would say better alternative for traditional javascript.
Read more >TypeError: Cannot read property 'clientWidth' of Null in JS
The "Cannot read property 'clientWidth' of null" error occurs when trying to access the clientWidth property on a null value. To solve the...
Read more >TypeError: Cannot read property 'clientWidth' of null : TBX-3675
As I already mentioned in another issue, the Toolbox App should write stack traces to its log file, so that issues like this...
Read more >Cannot read property 'clientWidth' of null jquery.dataTables ...
Hi All! I am new to datatables. I am using this to display results from ajax call.
Read more >The "Cannot read property 'clientWidth' of null" error occurs in ...
I upgraded from 17.1 to 17.2 and noticed that the FilesUploadComplete client-side javascript callback was not being called after the first ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@guillaume86 Could you make a pull request with the fix so it can be added to this repo as well?
A pull request from my fork would not be accepted because I also added a bunch of build artifacts to the repo (time constraints).
Important changes are in the index.js, feel free to do a proper PR: https://github.com/guillaume86/react-custom-scrollbars/commit/206c0be2d6e6d868e622935beccb27b6166de1cc#diff-56dac60181e52c3433963016d0092037