Synthetic event warning

[aprilmintacpineda]

• React@15.4.2
• React-Scrollbar-js@1.0.1

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `shiftKey` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

import ReactScrollbarJS from 'react-scrollbar-js';

// etc.

// on the render
<div className="post-right">
    <ReactScrollbarJS style={{height: '100%', width: '100%'}}>
        <p className="section-title">You may also like</p>
        {this.props.related_posts.length > 0? this.props.related_posts.map((post, i) =>
            <div className="related-post-wrapper" key={i}>
                <img src={settings.storage_path + '/images/' + post.cover_image} />
                <Link to={'/post/' + post.public_id}>{post.title}</Link>
            </div>
        ): <p>There are no related posts to show.</p>}
    </ReactScrollbarJS>
</div>

[usulpro]

Could you give us details where it appears?

[aprilmintacpineda]

it appears on first scroll.

[alaindresse]

@four-eyes-04-04, is there anything in your props.related_posts that could indicate a change ? My proposal in the other thread assumed that the number of related posts would signal a change. But maybe it is the date of the last related post, or something like that. Putting this value as the key for ReactScrollbarJS should trigger a redraw of the scrollbars when related_posts change, and hence showing the scrollbar.

Looking at the code you posted, another thing that comes to my mind is the images. Maybe your list takes less space until the images are loaded. So until the images are loaded, there is no need for a scrollbar, and after the images are loaded, the component is not refreshed. Putting a minimum height in the css for related-post-wrapper could help confirm that this is the issue.

[junedchhipa]

If anyone is still getting this issue, I had a temporary workaround. I had to put e.persist() in scroll event of the plugin, which will hide this Synthetic event warning.

[serjo96]

Same problem, on scroll have Synthetic warring this is live search results ReactScrollbar and results show if have response elements

renderResults = (item, index) =>{
        return (
            <Link to={'/' + item.media_type + '/' + urlRusLat(item.title || item.name) + '-' + item.id} className="result-element" key={index}>
            <div className="result-element__poster">
                <img src={(item.backdrop_path || item.poster_path) ? 'https://image.tmdb.org/t/p/w45_and_h67_bestv2/' + (item.backdrop_path || item.poster_path) :  NoImg} alt=""/>
            </div>
            <div className="result-element__title">
                <div>{item.title || item.name}</div>
                <div className="result-element__release">{item.release_date ? item.release_date.substring(0, 4) : null}</div>
            </div>
            <div className="result-element__type">{(item.media_type === 'tv') ? 'сериал' : (item.media_type === 'movie') ? 'фильм': 'актер'}</div>
        </Link>
        )};

    return (
         <div className="header__search search" onMouseDown={this.mouseDownHandler} onMouseUp={this.mouseUpHandler}>

             <input className="search__field" type="text" name="Search" placeholder="Поиск фильмов и сериалов..." onKeyDown={this.onKeyDown} onInput={this.onInput} value={this.props.SearchFieldVal}/>
                    {this.state.visabilityResult ?
                        <div className="search__result searchComboBox">

                            {this.props.SearchResult.isFetching ?
                                <ReactScrollbar style={myScrollbar} onScroll={e=>e.persist()}>
                                    {this.props.SearchResult.data.total_results >0 ?
                                this.props.SearchResult.data.results.map((item, index)=> this.renderResults(item,index))
                                : <div>Не чего не найдено, уточните запрос</div>}
                                </ReactScrollbar> : null}
                          </div> : null}

         </div>
     );