Input element is not claiming the available space

[ankon]

paper-chip/src/paper-chips-search.ts

Line 57 in b59b737

width: 40%;

This essentially makes the component look like a edit box, but only in the left/first 40% of it one can click to start typing, and one gets a input pointer. In the remaining 60% of the component the cursor is a pointer, and clicking doesn't do anything.

I tried to understand if there was a bug/reason for that by going through the code, but it seems a day-1 behavior.

I think these 40% should simply be set to 100% instead, WDYT?

[ronnyroeller]

The input field is set to 40% as it shouldn’t be flowing over to the next row if there are only few chips. Once, 60% of a row are filled with chips, it flows over.
As test cases I would see:

1. Have one short chip -> input field must be on the first row
2. Have some more chips (but less than 50% of width occupied) -> input field must be on the first row
3. Have more chip (>60% of row occupied / or user types to the end of the line) -> input field must be on second row
4. User types longer text than there is space remaining on the row -> input field jumps to next line (preferred) or input scrolls within the input field [i.e. it’s possible to enter longer text].

Happy to merge PR that implements that behavior (with a strong preference for a CSS based solution).

[ankon]

Additional test cases:

1. Clicking in the 60% activates editing
2. Cursor is a 'text edit' cursor for the complete element, not just the 40%-part