diff --git a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx
index 28dd6f748f..f65a7487da 100644
--- a/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx
+++ b/packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx
@@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
import {
Button,
TextInput,
@@ -85,6 +85,7 @@ const blockClass = `${pkg.prefix}--apikey-modal`;
const InstantTemplate = (args) => {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
+ const buttonRef = useRef(undefined);
const generateKey = async () => {
setLoading(true);
@@ -96,7 +97,12 @@ const InstantTemplate = (args) => {
return (
<>
- setOpen(false)} open={open} />
+ setOpen(false)}
+ open={open}
+ launcherButtonRef={buttonRef}
+ />
{loading ? (
) : (
-
+
)}
>
);
@@ -117,6 +125,7 @@ const TemplateWithState = (args) => {
const [apiKey, setApiKey] = useState('');
const [loading, setLoading] = useState(false);
const [fetchError, setFetchError] = useState(false);
+ const buttonRef = useRef(undefined);
// eslint-disable-next-line
const submitHandler = async (apiKeyName) => {
@@ -148,8 +157,11 @@ const TemplateWithState = (args) => {
onRequestGenerate={submitHandler}
open={open}
error={fetchError}
+ launcherButtonRef={buttonRef}
/>
-
+
>
);
};
@@ -166,6 +178,7 @@ const MultiStepTemplate = (args) => {
const [open, setOpen] = useState(false);
const [apiKey, setApiKey] = useState('');
const [loading, setLoading] = useState(false);
+ const buttonRef = useRef(undefined);
// multi step options
const [name, setName] = useState(savedName);
@@ -310,8 +323,9 @@ const MultiStepTemplate = (args) => {
customSteps={steps}
nameRequired={false}
editSuccess={editSuccess}
+ launcherButtonRef={buttonRef}
/>
-