[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

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

[tay1orjones]

Hey, there was a similar issue opened recently, #16216

There I mentioned:

When inline was added it's only purpose was as a passthrough prop to flatpickr. There are no design specs for it and it wasn't really meant to be a fully supported functionality of the component.

The storybook documentation doesn't really reflect this though. It needs updated:

• Remove it as a control from the controls pane
• Leave it in the prop tables though
• Update the comments on the prop and type to reflect that this feature is just a passthrough and doesn't have full support

---

Solving both this initial issue you pointed out, as well as the documentation items are great candidates for the community to fix/implement.

I think we can leave this issue open for making these updates to documentation

[tay1orjones]

@carbon-design-system/design are there any outstanding specs for this? should there be? If we're interested in fully supporting this feature we could take a look at how to accomplish this.

[laurenmrice]

@tay1orjones I agree with your response above. If we are not fully supporting this because it's a passthrough prop to flatpicker, the prop should be removed from the control pane and only listed in the prop tables.

Since this use case of using an inline date picker input (instead of our default input with a background) is not a frequent need or ask from our community within and outside of IBM, I don't feel we need to fully support this feature and it can continue to be used as a passthrough prop to flatpicker.

[NabeelAyubee]

Hi, I have tried to resolved the above issue. I have updated the CSS which is causing calendar icon alignment issue. I have added the story for inline true props.
Tested in local. It is working as expected.
Please review my PR and let me know if there's anything I missed.
Link: #17144

PS: My previous PR had some issue due to unwanted merges so closed it.