diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx
index 27edb900cb..eec26505b9 100644
--- a/src/app-layout/__tests__/runtime-drawers.test.tsx
+++ b/src/app-layout/__tests__/runtime-drawers.test.tsx
@@ -639,6 +639,20 @@ describeEachAppLayout(({ theme, size }) => {
wrapper.findToolsClose().click();
expect(onToolsChange).toHaveBeenCalledWith({ open: false });
});
+
+ test('opens a drawer when openDrawer is called', async () => {
+ awsuiPlugins.appLayout.registerDrawer(drawerDefaults);
+
+ const { wrapper } = await renderComponent();
+
+ expect(wrapper.findActiveDrawer()).toBeFalsy();
+
+ awsuiPlugins.appLayout.openDrawer('test');
+
+ await delay();
+
+ expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('runtime drawer content');
+ });
});
describe('toolbar mode only features', () => {
diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index 4be85a69c1..ec7ca80310 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -52,7 +52,8 @@ function useRuntimeDrawers(
activeDrawerId: string | null,
onActiveDrawerChange: (newDrawerId: string | null) => void,
activeGlobalDrawersIds: Array,
- setActiveGlobalDrawersIds: (newDrawerId: string) => void
+ setActiveGlobalDrawersIds: (newDrawerId: string) => void,
+ drawers: AppLayoutProps.Drawer[]
) {
const [runtimeLocalDrawers, setRuntimeLocalDrawers] = useState({ before: [], after: [] });
const [runtimeGlobalDrawers, setRuntimeGlobalDrawers] = useState({ before: [], after: [] });
@@ -96,6 +97,37 @@ function useRuntimeDrawers(
};
}, [activeGlobalDrawersIds, disableRuntimeDrawers, onGlobalDrawersChangeStable, onLocalDrawerChangeStable]);
+ useEffect(() => {
+ const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerOpened(drawerId => {
+ const localDrawer = [...runtimeLocalDrawers.before, ...drawers, ...runtimeLocalDrawers.after]?.find(
+ drawer => drawer.id === drawerId
+ );
+ const globalDrawer = [...runtimeGlobalDrawers.before, ...runtimeGlobalDrawers.after]?.find(
+ drawer => drawer.id === drawerId
+ );
+ if (localDrawer && activeDrawerId !== drawerId) {
+ onActiveDrawerChange(drawerId);
+ }
+ if (globalDrawer && !activeGlobalDrawersIds.includes(drawerId)) {
+ setActiveGlobalDrawersIds(drawerId);
+ }
+ });
+
+ return () => {
+ unsubscribe();
+ };
+ }, [
+ activeDrawerId,
+ activeGlobalDrawersIds,
+ drawers,
+ onActiveDrawerChange,
+ runtimeGlobalDrawers.after,
+ runtimeGlobalDrawers.before,
+ runtimeLocalDrawers.after,
+ runtimeLocalDrawers.before,
+ setActiveGlobalDrawersIds,
+ ]);
+
return {
local: runtimeLocalDrawers,
global: runtimeGlobalDrawers,
@@ -187,7 +219,8 @@ export function useDrawers(
activeDrawerId,
onActiveDrawerChange,
activeGlobalDrawersIds,
- onActiveGlobalDrawersChange
+ onActiveGlobalDrawersChange,
+ drawers ?? []
);
const combinedLocalDrawers = drawers
? [...runtimeLocalDrawers.before, ...drawers, ...runtimeLocalDrawers.after]