junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Handle submit button disabling

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-05-26 13:46:54 +01:00
parent 807d13f81e
commit b28f363391
1 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/app/components/home/NewPortfolioModal.tsx
View file

@ -48,6 +48,7 @@ export default function NewPortfolioModal({
const [selectedOutcome, setSelectedOutcome] = useState<string | null>(
"Nothing Specific"
);
const [buttonDisabled, setButtonDisabled] = useState(true);
function closeModal() {
setIsOpen(false);
@ -58,6 +59,15 @@ export default function NewPortfolioModal({
console.log("create portfolio");
}
function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
if (e.target.value.length > 0) {
setButtonDisabled(false);
} else {
setButtonDisabled(true);
}
setPortfolioName(e.target.value);
}
return (
<>
<Transition appear show={isOpen} as={Fragment}>
@ -107,7 +117,7 @@ export default function NewPortfolioModal({
placeholder="My new portfolio"
required
value={portfolioName}
onChange={(e) => setPortfolioName(e.target.value)}
onChange={(e) => handlePortfolioNameChange(e)}
className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
/>
</div>
@ -166,8 +176,9 @@ export default function NewPortfolioModal({
</button>
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-grey-900 hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-grey-900 hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:bg-gray-300 disabled:opacity-50"
onClick={createPortfolio}
disabled={buttonDisabled}
>
Create
</button>