Closed thebuilder closed 6 years ago
@thebuilder @divyanshu013 It seems the problem is here https://github.com/appbaseio/reactivesearch/blob/dev/packages/web/src/components/result/ReactiveList.js#L454
Also for the sandbox url, can I get the codesandbox code for that in order to replicate the issue on my local machine and see if this line is what is causing the issue.
@vivek12345 here's the sandbox link: https://codesandbox.io/s/l57vrrjvyl
It looks like you've found the root cause. You could set the innerClass prop as empty string by default ''
. That should do the trick.
@divyanshu013 Alright will do that and test the same.I was also thinking as to why this sandbox code did not get the listClass.From what I could see it comes from styles/card.js which is a simple css in js container style. Do you think that's also a matter of concern and should be checked?
listClass
prop is passed by ResultList
and ResultCard
which internally render a ReactiveList
. So, when using ReactiveList
by itself, it's getting undefined
. You may check the className after applying the fix. I think the problem should be resolved with it.
@divyanshu013 How do I test it now? I forked your repo, then did a npm link to this locally installed clone of the repo, but I am still not sure as to how do I test my changes locally before sending a PR. Can you guide here?
@divyanshu013 Don't bother about the previous comment, I have figured it out. The problem with keeping innerClass as empty string is that it fails the prop types check.
Prop types expect innerClass to be an object of type types.style.
@divyanshu013 It seems the solution here is making listClass default to empty string and not the innerClass
We will roll this out in the next release 🎉
Thank you for the contribution guys!
My bad, I intended to type listClass
😅, thanks for contributing 🤝
Issue Type: Bug
Platform: Web
Description: The wrapping
<div>
rendered byReactiveList
contains the CSS classundefined
.Screenshots:![Screenshot](https://user-images.githubusercontent.com/3764345/41714320-370b136e-7550-11e8-858f-678ff8ed7656.png)
Minimal reproduction of the problem with instructions: https://l57vrrjvyl.codesandbox.io/
Reactivesearch version: 2.6.8
Browser: all