[Input] slots overrides for startDecorator and endDecorator are not populated

[oleksii-aisulov-mck]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/thirsty-germain-4c4d9p?file=/src/App.js

Steps:

1. create a custom slots config for the <Input /> component
2. try to override startDecorator or endDecorator slots

in the CopePen attached you can see that overriding has no effect on the DOM but input component is populated correctly

Current behavior 😯

slots for startDecorator and endDecorator are not populated, element is not visible in the DOM

Expected behavior 🤔

slots for startDecorator and endDecorator are populated with components that are passed

Context 🔦

No response

Your environment 🌎

No response

[siriwatknp]

Thanks for reporting the issue but I think this is expected. The slots.endDecorator is a wrapper component to render endDecorator element.

If you use slots.endDecorator, it means that you want to override the default wrapper and providing your own component but the endDecorator won't be rendered if you don't provide it as a prop to Input component.

Here is an example if you want to remove the default wrapper:

function Dummy({ children }){
  return children;
}

<Input endDecorator={<Button />} slots={{ endDecorator: Dummy }} />