Baseweb: [Input] tags example with placeholder

[chasestarr]

codesandbox: https://codesandbox.io/s/createdelete-tags-t1udk
docs site example: https://baseweb.design/components/input/#create-delete-tags

Current Behavior

if tags are present, the placeholder text is visible

Expected Behavior

if tags are present, placeholder text is _not_ visible

[yosefanajjar]

I looked at the docs example, it is not this way right now, so I think this one is fixed but there is no placeholder anymore even when there are no inputs

[chasestarr]

Thanks for looking into the issue @yosefanajjar, but the documentation site example does not include a placeholder value. Can you reproduce with the codesandbox, and update it to the latest baseui version?

[yosefanajjar]

@chasestarr So you just want me to add a placeholder to the current version of the input in baseui? either you want this or another thing I can handle it.

I have also found a bug in the tags when you delete the first one the next one is like selected to be deleted, I mean the hover without even hovering on the element, here is a video that can explain it in a better way https://www.loom.com/share/e2c6c7e6c78d4ad68aab0658abc4d760

By the way the hello world placeholder I added it while playing with the dev tools, just saying so you don't get confused

[sultanassi95]

@yosefanajjar Any updates on the tags/placeholder issue?

[chasestarr]

The nice thing about this particular issue is that not much is happening 'inside' the component. The Tag components are rendered using overrides and the state is managed in the consuming application. A quick solve if this is a blocker would be to conditionally apply the placeholder value like below

<Input
  placeholder={tags.length ? null : "hello world"}
  value={value}
  onChange={e => setValue(e.currentTarget.value)}
/>

[yosefanajjar]

@sultanassi95 I will be working on it very soon, just doing a Linux setup the past day, and @chasestarr what do you think about the other bug? should I write an issue for it? or you would do it

[chasestarr]

Sure, feel free to open an issue with that bug

[yosefanajjar]

@sultanassi95 maybe you can open up a new issue with that bug and start working on it whenever you're free?

[sultanassi95]

The nice thing about this particular issue is that not much is happening 'inside' the component. The Tag components are rendered using overrides and the state is managed in the consuming application. A quick solve if this is a blocker would be to conditionally apply the placeholder value like below

<Input
  placeholder={tags.length ? null : "hello world"}
  value={value}
  onChange={e => setValue(e.currentTarget.value)}
/>

I was thinking of a more general solution to this particular case, which involves investigating the inputProps casted from the getOverrides helper.

It looked like: const placeholder = inputProps.tags.length ? null : this.props.placeholder, that'ld be in the scope of the render method of the BaseInput component.

I ran into the TS type check trouble while running the test script, which is kinda out of my league to solve.

When I thought about it, I though of how that with-tags is not a primary version of the Input component, but it's an advance use case for the component itself, which would make solving it up to the developer not the BaseUI dev team!