fluent ui - How to display/overlay a Spinner component in a TextField where iconProps usually render-CodePudding

I want the TextField to conditionally display the Spinner component exactly where an icon would render if you pass an icon to iconProps. I got the conditional rendering of the icon and spinner but I couldn't figure out how to include a component into TextField. So, I think the best way might be to possibly to overlay? Here is my codepen for trying to overlay the Spinner component


// Initialize icons in case this example uses them
initializeIcons();

const stackTokens = { childrenGap: 50 };
const iconProps = { iconName: 'Edit' };
const stackStyles: Partial<IStackStyles> = { root: { width: 650 } };
const columnProps: Partial<IStackProps> = {
  tokens: { childrenGap: 15 },
  styles: { root: { width: 300 } },
};

const TextFieldBasicExample: React.FunctionComponent = () => {
  return (
     <Stack horizontal tokens={stackTokens} styles={stackStyles}>
        <div style={{height: "100%", margin: "15px" }}>
          <Stack {...columnProps}>        
              <TextField label="With an icon" iconProps={iconProps} styles={{ root: { position: "absolute",zIndex: 1, width: "340px" } }}/>  
            </Stack>

            <div style={{display: "flex",
              zIndex: 13,
              // position: "absolute",
              // backgroundColor: "red", 
              justifyContent: "end"}}>
              <span style={{padding: "0px 24px 0px 8px"}}>
                <Spinner />
               </span>                    
            </div>          
         </div>  
     </Stack> 
  );
};

const TextFieldBasicExampleWrapper = () => <ThemeProvider><TextFieldBasicExample /></ThemeProvider>;
ReactDOM.render(<TextFieldBasicExampleWrapper />, document.getElementById('content'))````

CodePudding user response：

Wrap Textfield and Spinner Component with one div which has relative position and Spinner with absolute position. For example:

<div style={{ position: 'relative', width: 200 }}>
  <TextField label="With an Icon" />
  <Spinner
    styles={{ 
      root: { 
        position: 'absolute',
        top: 35,
        right: 8
      }
    }} 
  />
</div>

Here you are a full working example with some cool stuff.