fix(TimePicker): fix dropdown alignment

src/components/input/TimePicker/index.tsx

@@ -577,7 +577,7 @@ export const TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(
         </InputBox>
         {availableSlots && isOpened && !disabled && !props.readOnly && !skeleton && (
           <StyledDropdownContainer
-            targetElement={inputRef.current}
+            targetElement={inputContainerRef.current}
             alignSelf={alignSelf}
             onClickOutside={clickOutside}
             dropContainerCssMixin={dropContainerCssMixin}

src/components/input/TimePicker/stories/TimePickerSimple.template.tsx

@@ -32,6 +32,7 @@ export const TimePickerSimpleTemplate = ({
         value={localValue}
         onChange={handleChange}
         dropContainerClassName="dropContainerClass"
+        containerPropsConfig={() => ({ 'data-testid': 'testidTimePickerContainer' })}
       />
     </ThemeProvider>
   );

tests/TimePicker/timePicker.skeleton-align.spec.ts

@@ -10,13 +10,53 @@ test.describe('TimePicker - skeleton and dropdown alignment', () => {
     await expect(skeletonContainer).toBeVisible();
   });
 
-  test('align dropdown story opens dropdown', async ({ page }) => {
+  test('default dropdown aligns to right edge of container', async ({ page }) => {
+    await page.goto('/?path=/story/admiral-2-1-input-timepicker--time-picker-simple');
+    const frame = getStorybookFrameLocator(page);
+
+    const container = frame.getByTestId('testidTimePickerContainer');
+    await expect(container).toBeVisible();
+
+    const iconButton = frame.locator('.time-picker-icon-panel svg').last();
+    await clickAndWait(iconButton, page);
+
+    const dropdown = frame.locator('.dropContainerClass');
+    await expect(dropdown).toBeVisible();
+
+    const containerBox = await container.boundingBox();
+    const dropdownBox = await dropdown.boundingBox();
+
+    expect(containerBox).not.toBeNull();
+    expect(dropdownBox).not.toBeNull();
+    const containerRight =
+      (containerBox as NonNullable<typeof containerBox>).x + (containerBox as NonNullable<typeof containerBox>).width;
+    const dropdownRight =
+      (dropdownBox as NonNullable<typeof dropdownBox>).x + (dropdownBox as NonNullable<typeof dropdownBox>).width;
+
+    expect(dropdownRight).toBeCloseTo(containerRight, 1);
+  });
+
+  test('align dropdown story aligns left edge with container', async ({ page }) => {
     await page.goto('/?path=/story/admiral-2-1-input-timepicker--time-picker-align-dropdown-container');
     const frame = getStorybookFrameLocator(page);
 
+    const container = frame.locator('.time-picker-container');
+    await expect(container).toBeVisible();
+
     const iconButton = frame.locator('.time-picker-icon-panel svg').last();
     await clickAndWait(iconButton, page);
 
-    await expect(frame.locator('.dropContainerClass')).toBeVisible();
+    const dropdown = frame.locator('.dropContainerClass');
+    await expect(dropdown).toBeVisible();
+
+    const containerBox = await container.boundingBox();
+    const dropdownBox = await dropdown.boundingBox();
+
+    expect(containerBox).not.toBeNull();
+    expect(dropdownBox).not.toBeNull();
+    const containerLeft = (containerBox as NonNullable<typeof containerBox>).x;
+    const dropdownLeft = (dropdownBox as NonNullable<typeof dropdownBox>).x;
+
+    expect(dropdownLeft).toBeCloseTo(containerLeft, 1);
   });
 });