Topic: MDBAccordianItem had it's show/hidden property inverted
Expected behavior
I have an existing project that uses MDBReact and since upgrading from 4.1 to 4.2, my accordians no longer function as they used to - which was fine before. Just completely standard accordian behaviour.
Actual behavior
Two things happened - the first, index 0 no longer works. It's impossible to open an item with index 0. This is fixable by adding 1 to the index. Second, open and closed have become inverted on the accordian. So, they all start open apart from the initialActive item, and if you close one, the one that is closed pops open.
It's at least functional if I add alwaysOpen =true to the accordian.
Finally, the animations predictably occur in reverse - so I close an item, and the opening animation plays for a quarter second, and then pop, it's closed.
Resources (screenshots, code snippets etc.)
Here's the Item:
<MDBAccordionItem
className="section"
collapseId={props.sectionIndex + 1}
headerTitle={`${sectionCache.name}`}
>
Here's the accordian:
<MDBAccordion initialActive={1}>
Not sure if related or relevant here but the behavior of MDBAccordion (ReactJS) on webpack dev VS prod is totally different.
Works like expected and documented on a Dev env, and failing when compiled / deployed on prod env: the problems on prod are:
- All accordion items are opened by default.
- Visual glitch when opening/closing an accordion item (sounds compatible with the Topic: MDBAccordianItem had it's show/hidden property inverted)
The code for the Accordion is the code provided on the doc. the package.json looks like:
"dependencies": {
"@babel/runtime": "^7.18.9",
"@bugsnag/js": "^7.17.0",
"@bugsnag/plugin-react": "^7.17.0",
"@hello-pangea/dnd": "^15.0.0",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"acorn": "^8.8.0",
"animated-ellipsis": "^0.2.0",
"jsoneditor": "^9.9.0",
"jsoneditor-react": "^3.1.2",
"mdb-react-drag-and-drop": "git+https://oauth2:XXX@git.mdbootstrap.com/mdb/react/mdb5/plugins/prd/drag-and-drop",
"mdb-react-table-editor": "git+https://oauth2:XXX@git.mdbootstrap.com/mdb/react/mdb5/plugins/prd/table-editor",
"mdb-react-ui-kit": "git+https://oauth2:XXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-advanced",
"phoenix": "^1.6.11",
"polished": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intl": "^5.25.1",
"react-magnifier": "^3.0.4",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"@babel/core": "^7.18.10",
"@babel/plugin-transform-runtime": "^7.18.10",
"@babel/preset-env": "^7.18.10",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^5.2.6",
"eslint": "^7.27.0",
"eslint-plugin-react": "^7.30.1",
"file-loader": "^6.2.0",
"sass": "^1.54.4",
"sass-loader": "^12.6.0",
"source-map-loader": "^3.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.74.0",
"webpack-bugsnag-plugins": "^1.8.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.10.0"
}
Ok, so, I just cloned out your github repo: https://github.com/mdbootstrap/mdb-react-ui-kit
Then, this is what I put in the demo directory (which is copied straight from your docs):
import React from "react";
import { MDBAccordion, MDBAccordionItem, MDBBtn, MDBContainer, MDBIcon } from "mdb-react-ui-kit";
function App() {
return (
<MDBContainer fluid>
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh" }}
>
<div className="text-center">
<MDBAccordion initialActive={1}>
<MDBAccordionItem collapseId={1} headerTitle='Accordion Item #1'>
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</MDBAccordionItem>
<MDBAccordionItem collapseId={2} headerTitle='Accordion Item #2'>
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</MDBAccordionItem>
<MDBAccordionItem collapseId={3} headerTitle='Accordion Item #3'>
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the transition does limit overflow.
</MDBAccordionItem>
</MDBAccordion>
</div>
</div>
</MDBContainer>
);
}
export default App;
Then that reproduces the error.
doweb priority commented 2 years ago
It does register a few errors - and I ran npm install and npm start from the 'app' directory.
I don't know if this is exactly what you mean by creating a demo (do you have a link or tutorial for the future that lays it out?), but since it's possible to generate via your github repo and your docs, I figured this is all you need. Let me know if you need anything else!
doweb priority commented 2 years ago
(to be clear, in spite of the errors, the issue is plain to see)
Could you create a demo with this example? We have made a few changes in the collapse component, I think it's causing the problem. But it's hard to debug since our docs examples work fine.
doweb priority commented 2 years ago
Sure - I saw your example working beautifully, and I don't quite know what's different about my project. I'll give it a go.
doweb priority commented 2 years ago
Did the example work for you?
Wojciech Staniszewski staff commented 2 years ago
Yes, thank you. We will take a look at this problem.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.2.0
- Device: Macbook Pro
- Browser: Chrome
- OS: Mac OS
- Provided sample code: No
- Provided link: No