FormControlLayout: Error if append prop is a string

[flash1293]

Passing in a string as append to anything building on top of EuiFormControlLayout (EuiFieldText, EuiFieldNumber, ...) is allowed by the typings, but throws an error during runtime because it's always treated as a React element (https://github.com/elastic/eui/blob/master/src/components/form/form_control_layout/form_control_layout.tsx#L154).

[cchaos]

I think this will be fixed by #2167 , but I'll double-check when that PR is finalized

[flash1293]

Cool, thanks. I'm not sure whether this PR will fix it, it seems like the problem is that cloneElement is called on the node which won't work for strings. I could be wrong though, didn't run it.

createSideNode(
    node: ReactElement,
    side: 'append' | 'prepend',
    key: React.Key
  ) {
    return cloneElement(node, {
      className: `euiFormControlLayout__${side}`,
      key: key,
    });
  }

[cchaos]

Ah it looks like ReactElement is of type : string | class. Didn't realize string was allowed. The type should probably therefore be of class?

[flash1293]

Either that or having a separate branch in the code wrapping a naked string in a span and then apply the class to the span.

[chandlerprall]

It doesn't look like #2167 will address this issue: the type for append/prepend in EuiFormControlLayout is ReactElements which resolves to one of or an array of React.ReactElement - which are the results of any JSX e.g. <div>Hello World</div> (type: string | class is valid here, the string for the preceding example would be div, but any React.ReactElement is cloneable).

The issue is the index.d.ts types for EuiFieldText, EuiFieldNumber, etc are too loose by using the React.ReactNode, instead these should re-use the ReactElements type defined in form_control_layout.tsx

[flash1293]

If that fits on the roadmap it would be nice to go the other way and extend form control layout to support all of React.ReactNode - then this would be possible:

<EuiFieldText  value={timeoutValue} append="ms" />

Nothing super important though.

[cchaos]

prepend and appends do now accept strings and automatically wraps them in a <label>. I think this was fixed with the compressed forms.