md-autocomplete doesn't show listed suggestions when the chips are closed, for varying list of suggestions.
Scenario: I want to show suggestions only for the chips that are not added. Initially, all the chips are added, so there are no more chips left to add - no suggestions, which is fine. When a chip is closed and the input field is focused, there are still no suggestions but ideally there should be one chip in the suggestions list. The suggestions appear only if one or more characters are typed in.
md-autocomplete should re-render the items even when the query string length is 0, but seems like it is set to 1. This can be inferred by observing the filter function defined in md-items which doesn't get triggered, when the query string is empty.
Here is the CodePen link
Delete the added chips and focus on the input field. Observe that no suggestions for the closed chips are being displayed by md-autocomplete.
This is a bug with Angular Material library. I have raised an issue on Angular Material Github repo. A fix has been committed and is under review. Most probably, the patch should be available in the next release. Here is the link to the issue.
Related
I’m new to react and I’m connecting a react front end to a flask backend. I’m in a group project but I’ve been somehow responsible for 90% of the work. I’ve implemented the fields with MUI but I’m flexible and prefer working over appearance.
I made a form with react-form-hooks and tried to implement a custom range slider (I’m sorry that it’s not all broken out to components and is mainly single file). I’m new to React, JS and TSX (there’s a sandbox at the bottom of the post).
*Side-note: the form is loading pretty slow right now, any tips on improving performance would be greatly appreciated. (:
(Actually at this point appreciative for any ideas and open to feedback).
Advanced Search Form
What I am trying to achieve:
I am trying to take input as a range of values from 0 to 100 in a form. The values can be passed as [0,100] on default or if they are updated, on pressing submit the current values ([min, max]) of their state would be submitted. The information would be passed as a json response to an api backend through a post request.
I found some options online on implementing a range slider with react-hooks-form but could not get any of them to work unfortunately. Could someone please help me implement the range slider (I will need to use 3 of them in my form)?
If this is not possible, could you please assist with one of the following alternatives:
Option 1: Setting up a select box/combo-box that does the following:
Provides the user a max or min option based off the corresponding max/min option. I.e. if there is no input in either the Max or Min select/combo-box: Then both boxes would have 0-100 as the possible range of values. If the value of one box was touched: then the second select/combo fields values would be of the corresponding remainder of the range.
E.g. If I selected 70 for my minimum value my other select/combo would provide for me to either leave it blank, or give me the options 70 to 100. Or if I selected 82 for the max input field- the select for min would only allow me to use 0 to 82 for my min or leave it blank.
Option 2:
Text input fields with the same validation schema as above that would become an error state if the user entered something like:
artist-rating min: 40
artist-rating max: 20
Here is the sandbox:
https://codesandbox.io/s/advanced-search-form-forked-0lhgrv
Thanks for updating the post.
You problem is that Mui Slider Component, doesn't take the default input props, so you can't spread the register method returned by react-hook-form since it returns the default value and onChange props.
But react-hook-form is a great library and it already addressed the integration with the main react UI libs: https://react-hook-form.com/get-started#IntegratingwithUIlibraries
I implemented a basic example here:
https://codesandbox.io/s/wonderful-silence-9qlfbj?file=/src/App.js
They expose quite extensive and clear APIs, take your time to study them if you plan to use it as your form management library.
I was just wondering If I could get some thoughts and feedback on my todo app to see where I could improve. Also, one current issue I'm having the is with the checkbox.
I'm using the materialize framework to help create the UI but I can't get the materialized styled checkbox to function properly. My way around that was to place the standard checkbox over the materialized styled one with the help of positioning and Z-index, with the opacity at 0.
So the checkbox can still function while the materialized checkbox displays. The issue with that is that If I input to many characters for the task the standard checkbox moves.
Link to todo-app()
I have running JQGRID version 4.9.1, thanks to Oleg.
I am trying to add search functionality to the columns. I am trying to implement the search input fields on top of columns. When the user types something, it show only those values.
I am attaching an image hoping to clarify my question.
I have found the solution looking at the source code on the projects gitHUB.
It is activated by default I believe. In my case, I had it turned off in one of the settings.
I used a SmartSortable snippet by Pete Hunt from React.js Google Group that intergates jQuery UI sortable with React.
Unfortunately, after using it, editing input fields makes the text cursor to just to the end of the currently edited input field.
http://jsfiddle.net/NV/jfkn5/
Removing <SmartSortable> from the example fixes the problem.
Why is it happening? I believe, the <input>’s value get’s updated despite being exactly the same; I don’t understand why.
Best to you today! Im Requesting a bit of insight/help with some javascript in this form that adds up the priced selections from more than 1 priced-dropdown menu of a paypal button to a total cost. It's almost working but the selected option(s) from the first 3 dropdown menus in the example are not successfully being passed along to the total cost field. (as you can see only one is monetized here this time). Its that the Javascript for the arithmetic is slightly off or missing something but i cant see it yet!
2nd question:: How can i most directly successfully add a third priced dropdown menu to be figured into the total cost. Thank you already. "Stack" is a pretty fierce resource.
3rd question: Im Highly interested in turning the "Total cost" text input field into a read-only flat output figure.
Found the answer thanks!