carbon
carbon copied to clipboard
[Bug]: Calendar icon in Datepicker input got displaced when providing the prop inline to true
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