GovAlta
Modal: Opening in the middle, not at the top
Info
Reported by Qing An
~This is a React issue, it can't be replicated with Angular.~ Update: This is both a react and angular problem
The browser doesn't seem to matter, it can be replicated both in Chromium and Firefox.
If the modal is too large and requires scrolling, when you open the modal, it auto opens in the middle of the modal, instead of at the top, which is what happens with Angular and is expected.
This can be replicated with the following code:
import { GoabModal, GoabButton, GoabButtonGroup } from "@abgov/react-components";
import { useState } from "react";
export const ModalRoute = () => {
const [open, setOpen] = useState(false);
function onClick() {
setOpen(true);
}
function onClose() {
console.log("closed");
setOpen(false);
}
return (
<>
<GoabButton onClick={onClick}>Show Modal</GoabButton>
<GoabModal heading="Industry Description" open={open}>
<h4>Business, building, and other support services</h4>
<p>This industry is made up of two major sub industries:</p>
<ol>
<li>Management of companies and enterprises</li>
<li>Administrative and support, waste management and remediation services</li>
</ol>
<h4>Management of companies and enterprises</h4>
<p>This industry compprises:</p>
<ol>
<li>
Legal entities engaged only in holding the securities of subsidiaries and
affiliates for the purpose of owning a controlling interest or influencing the
management decisions of these businesses, or
</li>
<li>
Businesses primarily engaged in adminstering, overseeing, and managing other
establishments of the company or enterprise and which may also hold the
securities of their subsidiaries and affiliates.
</li>
</ol>
<h4>Administrative and support, waste management and remediation services</h4>
<p>This industry comprises of:</p>
<ol>
<li>
Administrative and support services, estabilishments primarily engaged in
activities such as administration, hiring, and placing personnel,{" "}
</li>
</ol>
<GoabButtonGroup alignment="end" mt="l">
<GoabButton type="primary" onClick={onClose}>
I understand
</GoabButton>
</GoabButtonGroup>
</GoabModal>
</>
);
};
In the above code, I'm using the new version, where this problem exists, but if this requires a fix in react-components, it also needs to be done in the LTS version.
This can also be seen here, https://jam.dev/c/d2665d89-fb9c-4d8e-af0f-d57553c01848
Acceptance Criteria
- When opening the modal, the modal should always open at the top of the modal
@Spark450 Updated description because it affects react and angular Modal
27th March 2025: finish testing the first round. Comment is at https://github.com/GovAlta/ui-components/pull/2506#issuecomment-2759696088
Need to work on this because screenreader should read entire "alertdialog" type when it opens, but not basic modal
:tada: This issue has been resolved in version 1.34.1-alpha.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version 1.5.0-alpha.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version 4.5.0-alpha.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version 6.5.0-alpha.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version 1.5.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version 1.35.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version 4.5.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version 6.5.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket: