Hello, I have this function:const handleSearch = (e) => { debounceSetSearch(e.target.value); };And I have this component in Material UI: { if (e.key === 'Enter') { handleSearch(e); } }} InputProps={{ startAdornment: ( { console.log('e:', e.target.value); handleSearch(e); }} style={{ cursor: 'pointer' }} > ), }} />The problem with the onClick prop is always return 'undefined', I don't know how to fix it

undefined value

Unanswered

Marble gall posted this in #help-forum

Marble gallOP

2023-12-06T15:32:01.000Z

Hello, I have this function:
const handleSearch = (e) => {
debounceSetSearch(e.target.value);
};

And I have this component in Material UI:
<TextField
sx={{ my: '0px', pt: '0px', pb: '0px', mb: '3px', width: '11.4rem' }}
label="Search"
size="small"
onKeyUp={(e) => {
if (e.key === 'Enter') {
handleSearch(e);
}
}}
InputProps={{
startAdornment: (
<InputAdornment
position="start"
onClick={(e) => {
console.log('e:', e.target.value);
handleSearch(e);
}}
style={{ cursor: 'pointer' }}
>
<SearchTwoToneIcon />
</InputAdornment>
),
}}
/>

The problem with the onClick prop is always return 'undefined', I don't know how to fix it

38 Replies

B33fb0n3

2023-12-06T15:36:03.000Z

The console.log is fired and is not undefined? @Marble gall

@B33fb0n3 The console.log is fired and is not undefined? <@983812722284183612>

Marble gallOP

2023-12-06T15:37:45.000Z

Hi, the console.log give me undefined every time I click

@Marble gall Hi, the console.log give me undefined every time I click

B33fb0n3

2023-12-06T15:39:58.000Z

then the event on the InputAdornment doesn't exists. You want to put the event somewhere where onClick is available

Marble gallOP

2023-12-06T15:40:17.000Z

Yes

B33fb0n3

2023-12-06T15:41:20.000Z

soo problem solved? lol xD

Marble gallOP

2023-12-06T15:43:07.000Z

still doesn't work

Where do I have put the prop 'onClick' ?

B33fb0n3

2023-12-06T15:44:54.000Z

where are the click event's for this icon?

Marble gallOP

2023-12-06T15:45:46.000Z

here

 onClick={(e) => {
                            console.log('e:', e.target.value);
                            handleSearch(e);
                          }}

Ray

2023-12-06T15:47:41.000Z

 <InputAdornment position="start">
  <IconButton
    onClick={() => { console.log("click") }}
    edge="end"
  >
    <SearchTwoToneIcon />
  </IconButton>
</InputAdornment>

Marble gallOP

2023-12-06T15:56:21.000Z

I try it

and I try it this

<TextField
                    sx={{ my: '0px', pt: '0px', pb: '0px', mb: '3px', width: '11.4rem' }}
                    label="Search"
                    size="small"
                    onKeyUp={(e) => {
                      if (e.key === 'Enter') {
                        handleSearch(e);
                      }
                    }}
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <IconButton
                            onClick={(e) => {
                              handleSearch(e);
                              console.log('click', e.target.value);
                            }}
                            edge="end"
                          >
                            <SearchTwoToneIcon />
                          </IconButton>
                        </InputAdornment>
                      ),
                    }}
                  />

I think the problem is the "startAdornment", does not allow the event to travel

Ray

2023-12-06T15:58:50.000Z

you should put the value to state or something

Marble gallOP

2023-12-06T16:00:19.000Z

yes, the value is in the props of my component, for example, the prop onKeyUp works perfect

Ray

2023-12-06T16:01:28.000Z

the click event would not have the value from the input

Marble gallOP

2023-12-06T16:05:31.000Z

so how I can fix it?

@Marble gall so how I can fix it?

Ray

2023-12-06T16:12:34.000Z

const searchTextRef = useRef();

  const handleSearch = () => {
    debounceSetSearch(searchTextRef.current);
  };

  return (
    <TextField
      ref={searchTextRef}
      sx={{ my: "0px", pt: "0px", pb: "0px", mb: "3px", width: "11.4rem" }}
      label="Search"
      size="small"
      onChange={e => {
        searchTextRef.current = e.target.value;
      }}
      onKeyUp={(e) => {
        if (e.key === "Enter") {
          handleSearch();
        }
      }}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <IconButton
              onClick={(e) => {
                handleSearch();
                console.log("click", e.target.value);
              }}
              edge="end"
            >
              <SearchTwoToneIcon />
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );

Marble gallOP

2023-12-06T16:14:09.000Z

I made it and I don't have success, I see the problem is de onClick inside the "startAdornment" , because if I move the onClick outside it works, but inside doesn't work

Ray

2023-12-06T16:14:26.000Z

ah ok

so it works now?

Marble gallOP

2023-12-06T16:15:52.000Z

yes but I need the SearchTwoToneIcon have the onClick

Ray

2023-12-06T16:18:33.000Z

why? it doesnt have onClick props

that's why you need to wrap it with IconButton

Marble gallOP

2023-12-06T16:22:40.000Z

Because I need the icon to be clickable, the problem is that everything I put with onclick inside the InputProps does not work, if I put it outside it works

Ray

2023-12-06T16:23:26.000Z

https://mui.com/material-ui/react-text-field/#input-adornments

check their example

the password input

Marble gallOP

2023-12-06T16:23:53.000Z

let's see

I see it but it doesn't have any onClick prop

have a type "password"

oh 1 minute

Marble gallOP

2023-12-06T16:46:16.000Z

I make this like the example:

const searchInputRef = React.useRef(null);
<TextField
                    id="search-input"
                    inputRef={searchInputRef}
                    sx={{ my: '0px', pt: '0px', pb: '0px', mb: '3px', width: '11.4rem' }}
                    label="Search"
                    size="small"
                    onKeyUp={(e) => {
                      if (e.key === 'Enter') {
                        handleSearch(e);
                      }
                    }}
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <IconButton
                            onClick={() => {
                              handleSearch(searchInputRef.current?.value);
                              console.log('searchInputRef.current?.value', searchInputRef.current?.value);
                            }}
                            edge="end"
                          >
                            <SearchTwoToneIcon />
                          </IconButton>
                        </InputAdornment>
                      ),
                    }}
                  />

but doesn't work

Ray

2023-12-06T16:52:57.000Z

 const searchInputRef = React.useRef(null);

  function handleSearch() {
    debounceSetSearch(searchInputRef.current);
  }

  return (
    <TextField
      id="search-input"
      inputRef={searchInputRef}
      sx={{ my: "0px", pt: "0px", pb: "0px", mb: "3px", width: "11.4rem" }}
      label="Search"
      size="small"
      onKeyUp={(e) => {
        if (e.key === "Enter") {
          handleSearch();
        }
      }}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <IconButton
              onClick={() => {
                handleSearch();
                console.log(
                  "searchInputRef.current?.value",
                  searchInputRef.current?.value
                );
              }}
              edge="end"
            >
              <SearchTwoToneIcon />
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );

Marble gallOP

2023-12-06T16:54:30.000Z

it works, thank you!

Ray

2023-12-06T16:55:28.000Z

please mark solutionðŸ˜†

Marble gallOP

2023-12-06T17:02:42.000Z

where I do that?

Ray

2023-12-06T17:07:09.000Z

right click > application > mark solution