Unexpected behavior when using AutoComplete in Material UI

Currently, I am developing a small application using react-redux and material-ui. However, I have encountered an issue with the autocomplete field while implementing the onNewRequest property. Instead of triggering when I select an element from the list, it behaves like an onClick event for the component.

Here is a snippet of the code:

const test = () => {
  alert("Something");
}

The component relies on a service response to display the data as follows:

case Status.OK:
  return <AutoComplete
    floatingLabelText="Origin"
    filter={(searchText, key) => (searchText.length >= 3 && key.indexOf(searchText) !== -1)}
    dataSource={ renderOrigins(response.data) }
    openOnFocus={false}
    maxSearchResults={3}
    onNewRequest={ test() }
    onClick={onClick(dispatch)}
    style={{marginRight: '30px'}}
  />

In essence, the problem lies in the fact that the function test() gets executed when selecting the autocomplete field, rather than when choosing an item from the list.

Best regards.

Answer №1

Apologies for the mistake, the correct code should be onNewRequest={ test }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing Numerous Entries in Database - Managing a One-to-Many Connection

I am currently working with Laravel 5.7 and VueJs 2.5.*... My issue is related to saving data for TicketInvoice and its corresponding TicketInvoiceItems in the database. When I submit the Invoice form, the TicketInvoice data gets stored in the database su ...

ReactJS issue: Violation of the Invariant

I have recently started working on an exciting project using React JS and I have been enjoying the process so far. However, I recently encountered an error that has been causing me some trouble. Here is the error message I received: Uncaught Error: Invari ...

Discovering the value of an item when the editItem function is triggered in jsGrid

Within my jsGrid setup, I have invoked the editItem function in this manner: editItem: function(item) { var $row = this.rowByItem(item); if ($row.length) { console.log('$row: '+JSON ...

Two jQuery event handlers with similar functionality are displaying distinct behaviors

I've encountered an issue with two identical document fragment objects where separate event listeners are attached using jQuery, as demonstrated in this fiddle. Although the two event listeners should function the same way, only the first one behaves ...

Tips for performing a redirect in JavaScript/ReactJS without storing the redirection in the cache

In my TypeScript ReactJS SSR App, I have the following logic: public login() { let error: boolean = false const isLoggedIn: boolean = doSomeLogicHereLikeBackendCheck() if(isLoggedIn) { window.location.href = "/home" // this is getting c ...

Tips for accessing various JSON objects from a JSON document

My task involves extracting specific information from a JSON file using AJAX and jQuery. The structure of my JSON data is as follows: "Footwear": { "Adidas": [ { "id" : 0, &q ...

Using AJAX to dynamically update text areas on a webpage without the need to refresh the

My goal is to dynamically update the content of a textarea on my webpage when a form is submitted, without having to refresh the entire page. Initially, I attempted to achieve this using AJAX with the following code: $("#db_info").load(document.location.h ...

Unusual user interface actions following a double-click

I've been working with HTML code that uses KnockoutJS for data binding and DOM manipulation. One particular issue I've encountered is with highlighting a word on single-click and executing an action on double-click. Everything works as expected, ...

What role does the conditional statement play in the function ExtrudeGeometry.UVGenerator.generateSideWallUV within three.js?

Within three.js's ExtrudeGeometry.UVGenerator.generateSideWallUV function, there is a specific condition being checked: if ( Math.abs( a.y - b.y ) < 0.01 ) { return [ new Vector2( a.x, 1 - a.z ), new Vector2( b.x, ...

Drop-down autocomplete features from Jquery-ui will show up below every word

Currently, I am utilizing Autocomplete from jquery-ui for multiple values. However, the dropdown list appears at the size of the input box. Is there a way to adjust it so that the dropdown appears below the cursor position with a width equivalent to the dr ...

Attempting to import a 3D model in the format of .glb

Encountered error in console: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". Attempting to load a 3D model, here are my index.html and 3dmodel.js files. Am I overlooking some ...

Best method for connecting user input with a class

I'm currently working with a WYSIWYG editor (Tinymce) that allows users to post YouTube videos. In order to make the video content responsive, I need to add the class "video-container" around any "iframe" tags inserted when users paste a YouTube link ...

Tips on how to collapse all elements whenever one is being opened in a FAQ card using ReactJS

Clicking on a question reveals its text, and clicking on another collapses the previous one. The issue arises when trying to close an open question by clicking on it again - it doesn't work as intended due to a potential error in the If statement [im ...

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

Finding your way through Bootstrap Datepicker using the Previous and Next Buttons

Is there a way to implement Previous and Next Button functionality for navigating a Bootstrap Datepicker using jQuery, similar to the illustration below? https://i.sstatic.net/e9I7P.png I attempted the following approach: function PrevNext(isnextbtn) ...

What causes JSON.stringify($('#calendar').fullcalendar('clientEvents')) to fail?

In my attempts to achieve this goal, I encountered a problem. When attempting the following code: myString = JSON.stringify($('#calendar').fullcalendar('clientEvents')); it was unsuccessful. Upon trying to alert myString, I only saw a ...

Accessing dropdown selection in Javascript-Json: A Comprehensive Guide

My dropdown list is being populated dynamically using json. The selected option from the first dropdown determines the options in a secondary dropdown. I need to use the selection from the second dropdown to automatically fill out two more fields. For exa ...

Identifying the element with the specified ID within the table's <th> tag in JavaScript

I want to create a table with the title: Summary Statement as of August 3, 2017 at 12:55 The date is functioning properly using JavaScript in other parts of the code, but not in this section. Is there a specific technique I should be aware of? The rest of ...

What is the best method for typing a component prop that is compatible with singular use and can also function within loops without disrupting intellisense?

The Scenario Within a heading component, I have defined various types as shown below: // Heading/index.d.ts import { HTMLAttributes } from 'react'; export const HeadingType: { product: 'product'; marketing: 'marketing'; ...

"Modifying Code Aesthetics in WebStorm/IDEA: A Step-by-

Here is the code style I am currently using in my JavaScript project: var obj = { a: 1 , b: 2 , c: 3 } var arr = [ 'a1' , 'a2' , 'a3' ] const w = 1 , w2 = 2 , w3 = 3 The team claims they are following npm's co ...