hasyed-akamai · Jun 23, 2025 · Jun 16, 2025 · Jun 16, 2025 · Jun 22, 2025 · Jun 22, 2025
diff --git a/packages/manager/.changeset/pr-12387-changed-1750576427858.md b/packages/manager/.changeset/pr-12387-changed-1750576427858.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+TextField and Autocomplete components to wrap startAdornment and endAdornment props using InputAdornment ([#12387](https://github.com/linode/manager/pull/12387))
diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
@@ -1,4 +1,4 @@
-import { Box, TextField } from '@linode/ui';
+import { Box, InputAdornment, TextField } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -40,12 +40,14 @@ export const CopyableTextField = (props: CopyableTextFieldProps) => {
       disabled
       InputProps={{
         endAdornment: hideIcons ? undefined : (
-          <StyledIconBox>
-            {showDownloadIcon && (
-              <DownloadTooltip fileName={fileName} text={`${value}`} />
-            )}
-            <CopyTooltip text={`${value}`} {...CopyTooltipProps} />
-          </StyledIconBox>
+          <InputAdornment position="end">
+            <StyledIconBox>
+              {showDownloadIcon && (
+                <DownloadTooltip fileName={fileName} text={`${value}`} />
+              )}
+              <CopyTooltip text={`${value}`} {...CopyTooltipProps} />
+            </StyledIconBox>
+          </InputAdornment>
         ),
       }}
     />

diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx
@@ -1,5 +1,5 @@
 import { useAllAccountAvailabilitiesQuery } from '@linode/queries';
-import { Autocomplete } from '@linode/ui';
+import { Autocomplete, InputAdornment } from '@linode/ui';
 import PublicIcon from '@mui/icons-material/Public';
 import { createFilterOptions } from '@mui/material/Autocomplete';
 import * as React from 'react';
@@ -148,22 +148,26 @@ export const RegionSelect = <
         textFieldProps={{
           ...props.textFieldProps,
           InputProps: {
-            endAdornment:
-              isGeckoLAEnabled && selectedRegion && `(${selectedRegion?.id})`,
+            endAdornment: isGeckoLAEnabled && selectedRegion && (
+              <InputAdornment position="end">
+                ({selectedRegion?.id})
+              </InputAdornment>
+            ),
             required,
-            startAdornment:
-              selectedRegion &&
-              (selectedRegion.id === 'global' ? (
-                <PublicIcon
-                  sx={{
-                    height: '24px',
-                    mr: 1,
-                    width: '24px',
-                  }}
-                />
-              ) : (
-                <Flag country={selectedRegion?.country} mr={1} />
-              )),
+            startAdornment: selectedRegion && (
+              <InputAdornment position="start">
+                {selectedRegion.id === 'global' ? (
+                  <PublicIcon
+                    sx={{
+                      height: '24px',
+                      width: '24px',
+                    }}
+                  />
+                ) : (
+                  <Flag country={selectedRegion?.country} />
+                )}
+              </InputAdornment>
+            ),
           },
           tooltipText,
         }}

diff --git a/packages/manager/src/features/Account/Quotas/QuotasIncreaseForm.tsx b/packages/manager/src/features/Account/Quotas/QuotasIncreaseForm.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useCreateSupportTicketMutation, useProfile } from '@linode/queries';
-import { Select } from '@linode/ui';
+import { InputAdornment, Select } from '@linode/ui';
 import {
   Accordion,
   ActionsPanel,
@@ -142,21 +142,22 @@ export const QuotasIncreaseForm = (props: QuotasIncreaseFormProps) => {
                   slotProps={{
                     input: {
                       endAdornment: (
-                        <Typography
-                          component="span"
-                          sx={(theme) => ({
-                            color: theme.tokens.alias.Content.Text,
-                            font: theme.font.bold,
-                            fontSize: theme.tokens.font.FontSize.Xxxs,
-                            mx: 1,
-                            textTransform: 'uppercase',
-                            userSelect: 'none',
-                            whiteSpace: 'nowrap',
-                          })}
-                        >
-                          {convertedResourceMetrics?.metric ??
-                            quota.resource_metric}
-                        </Typography>
+                        <InputAdornment position="end">
+                          <Typography
+                            component="span"
+                            sx={(theme) => ({
+                              color: theme.tokens.alias.Content.Text,
+                              font: theme.font.bold,
+                              fontSize: theme.tokens.font.FontSize.Xxxs,
+                              textTransform: 'uppercase',
+                              userSelect: 'none',
+                              whiteSpace: 'nowrap',
+                            })}
+                          >
+                            {convertedResourceMetrics?.metric ??
+                              quota.resource_metric}
+                          </Typography>
+                        </InputAdornment>
                       ),
                     },
                   }}

diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Box } from '@linode/ui';
+import { Autocomplete, Box, InputAdornment } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import React from 'react';
 
@@ -77,11 +77,11 @@ export const DatabaseEngineSelect = (props: Props) => {
       textFieldProps={{
         InputProps: {
           startAdornment: (
-            <Box
-              sx={{ pr: 1, pt: 0.7, svg: { height: '20px', width: '20px' } }}
-            >
-              {selectedEngine?.flag}
-            </Box>
+            <InputAdornment position="start">
+              <Box sx={{ pt: 0.7, svg: { height: '20px', width: '20px' } }}>
+                {selectedEngine?.flag}
+              </Box>
+            </InputAdornment>
           ),
         },
       }}

diff --git a/packages/manager/src/features/Firewalls/components/FirewallSelect.tsx b/packages/manager/src/features/Firewalls/components/FirewallSelect.tsx
@@ -1,5 +1,5 @@
 import { useAllFirewallsQuery } from '@linode/queries';
-import { Autocomplete } from '@linode/ui';
+import { Autocomplete, InputAdornment } from '@linode/ui';
 import React, { useMemo } from 'react';
 
 import { useDefaultFirewallChipInformation } from 'src/hooks/useDefaultFirewallChipInformation';
@@ -79,10 +79,12 @@ export const FirewallSelect = <DisableClearable extends boolean>(
       textFieldProps={{
         InputProps: {
           endAdornment: isDefault && !hideDefaultChips && (
-            <DefaultFirewallChip
-              defaultNumEntities={defaultNumEntities}
-              tooltipText={tooltipText}
-            />
+            <InputAdornment position="end">
+              <DefaultFirewallChip
+                defaultNumEntities={defaultNumEntities}
+                tooltipText={tooltipText}
+              />
+            </InputAdornment>
           ),
         },
       }}

diff --git a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx
@@ -88,7 +88,7 @@ const SupportSearchLanding = (props: AlgoliaProps) => {
           InputProps={{
             className: classes.searchBar,
             startAdornment: (
-              <InputAdornment className={classes.searchIcon} position="end">
+              <InputAdornment className={classes.searchIcon} position="start">
                 <Search />
               </InputAdornment>
             ),

diff --git a/...nager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/...nager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
@@ -307,7 +307,7 @@ export const PhoneVerification = ({
                   id="phone_number"
                   InputProps={{
                     startAdornment: selectedCountry ? (
-                      <InputAdornment position="end">
+                      <InputAdornment position="start">
                         {selectedCountry.dialingCode}
                       </InputAdornment>
                     ) : undefined,

diff --git a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx
@@ -36,7 +36,7 @@ export const StackScriptForm = (props: Props) => {
             errorText={fieldState.error?.message}
             InputProps={{
               startAdornment: (
-                <InputAdornment position="end">{username} /</InputAdornment>
+                <InputAdornment position="start">{username} /</InputAdornment>
               ),
             }}
             inputRef={field.ref}

diff --git a/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx b/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx
@@ -3,7 +3,13 @@ import {
   useStackScriptsInfiniteQuery,
 } from '@linode/queries';
 import { getAPIFilterFromQuery } from '@linode/search';
-import { CircleProgress, ErrorState, Stack, TooltipIcon } from '@linode/ui';
+import {
+  CircleProgress,
+  ErrorState,
+  InputAdornment,
+  Stack,
+  TooltipIcon,
+} from '@linode/ui';
 import { Hidden } from '@linode/ui';
 import {
   useMatch,
@@ -131,11 +137,13 @@ export const StackScriptLandingTable = (props: Props) => {
           searchParseError
             ? {
                 endAdornment: (
-                  <TooltipIcon
-                    status="error"
-                    sxTooltipIcon={{ p: 0.75 }}
-                    text={searchParseError.message}
-                  />
+                  <InputAdornment position="end">
+                    <TooltipIcon
+                      status="error"
+                      sxTooltipIcon={{ p: 0.75 }}
+                      text={searchParseError.message}
+                    />
+                  </InputAdornment>
                 ),
               }
             : {}

diff --git a/packages/manager/src/features/Support/AttachFileListItem.tsx b/packages/manager/src/features/Support/AttachFileListItem.tsx
@@ -75,7 +75,7 @@ export const AttachFileListItem = (props: Props) => {
               </InputAdornment>
             ),
             startAdornment: (
-              <InputAdornment position="end">
+              <InputAdornment position="start">
                 <CloudUpload />
               </InputAdornment>
             ),

diff --git a/packages/ui/src/components/TextField/TextField.test.tsx b/packages/ui/src/components/TextField/TextField.test.tsx
@@ -65,7 +65,7 @@ describe('TextField', () => {
     const { getByDisplayValue, getByTestId, getByText } = renderWithTheme(
       <TextField
         InputProps={{
-          startAdornment: <InputAdornment position="end">$</InputAdornment>,
+          startAdornment: <InputAdornment position="start">$</InputAdornment>,
         }}
         label={'Money'}
         type={'number'}