[Bug]: Calendar icon in Datepicker input got displaced when providing the prop inline to true

[jagathgj]

Package

@carbon/react

Browser

Chrome

Package version

1.57.0

React version

18

Description

When providing prop inline= true, the calendar icon which appears over date picker input got displaced over the calendar. This is because the svg(.cds--date-picker__icon) is in absolute position.

Reproduction/example

https://stackblitz.com/edit/github-y7mu2g?file=src%2FApp.jsx

Steps to reproduce

<DatePicker
            dateFormat="m/d/Y"
            datePickerType="single"
            onChange={() => {}}
            inline={true}
            altInputClass="invisible"
            allowInput={false}
          >
            <DatePickerInput
              id="datePickerinput"
              placeholder="mm/dd/yyyy"
              labelText="Date picker"
              hideLabel={true}
            />
</DatePicker>

Suggested Severity

None

Application/PAL

WxO

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems