MDBAccordianItem had it's show/hidden property inverted


Topic: MDBAccordianItem had it's show/hidden property inverted

doweb pro premium priority asked 2 years ago

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}>

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 pro premium 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 pro premium 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.


doweb pro premium priority answered 2 years ago

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 pro premium 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 pro premium priority commented 2 years ago

(to be clear, in spite of the errors, the issue is plain to see)


weeldi pro premium priority answered 2 years ago

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:

  1. All accordion items are opened by default.
  2. 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"
  }

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • 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