On Antd v4, we can trigger "mousedown" events on Select components (with role="combobox"), to simulate the dropdown rendering of the options.
However, in the case of the Cascader component (which is just a more complex Select component), I can't display the corresponding Cascader options when triggering a "mousedown" event.
How to simulate a "mousedown" event on a Cascader component ?
I'm using Antd 4.10.0
For example, the following antd input has the "combobox" role, and triggering the "mousedown" event on it, will display the dropdown options:
<input id="someinput" role="combobox" autocomplete="off" .../>
const comboBox = await screen.findByRole('combobox');
fireEvent.mouseDown(comboBox);
In the case of a Cascader component, (at least on Antd 4.10.0), the generated input looks like this:
<input autocomplete="off" tabindex="-1" class="ant-input ant-cascader-input" type="text" value="">
But triggering a mousedown / click event on that input does not show the corresponding Cascader options layer.
Any help would be greatly appreciated, thanks
Related
I am refactoring a Formik form to react-hook-form v7. The Formik form has this structure:
<FormikProvider value={form}>
<Form>
<Field
component={FighterInput}
fighterAvailability={fighterAvailabilityStatus}
/>
<StandardButton
type="submit"
>
</StandardButton>
</Form>
</FormikProvider>
The FighterInput component is a component which has an input field and a function that renders a div based on fighter availability.
I need to get the typed in value character by character because a useEffect triggers other functions so I need to use react-hook-form watch or something else that let's me grab every character that is typed in to the {FighterInput} component, this is currently achieved with Formiks context values, but I need to do this in react-hook-form.
I've been able to get the value using watch with the following approach:
const fighter = watch('fighterInput');
<form>
<input {...register("fighterInput")} />
</form>
But this is not using the {FighterInput} component. The {FighterInput} component accepts props and returns an an input field. It also has some functions that renders a div based on conditionals set in the useEffect in the main component where I want to use react-hook-form and import {FighterInput}
How can I transform the Formik form with the above structure to achieve the same thing using react-hook-form v7 and render the {FighterInput} component while being able to grab every character on-the-fly as it is being typed into the input of {FighterInput} ?
<Controller
control={control}
name="test"
render={({
field: { onChange, onBlur, value, name, ref },
fieldState: { invalid, isTouched, isDirty, error },
formState,
}) => (
<FighterInput
onChange={onChange} // send value to hook form
checked={value}
inputRef={ref}
{...register("fighterInput")} // not working
/>
)}
/>
In addition to being able to watch the input, I need to be able to access form values in my FighterInput component as well and wondering how I can do that, am I supposed to use react-hook-forms useFormContext or FormProvider?
We are working to make our application as accessible as possible. We need to allow customers to keep their hands on the keyboard and tab all the way through the application. We are using angular-ui/bootstrap horizontal navset tabs to display and collect data within each tab-panel. Currently we cannot find a non-mouse way to get focus from the tabs down into the tab-panel to allow focus on select-able components.
Is the tabset built for view-only content? If not, how do we get focus down to editable / select-able components in the tab-panels?
HTML:
<tabset>
<tab tab-index=1>
<tab-heading>
<span>hello</span><em>1</em>
</tab-heading>
One
<input type="button" value="test" tabindex="2">
</tab>
<tab heading="Two" tab-index=1>Two</tab>
<tab heading="Three" tab-index=1>Three</tab>
</tabset>
JS:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('test', function ($scope) {
});
In iOS 8 and above, to show the Search button on the iOS keyboard, you use the action attribute in the form. From Anton's answer here ... Show 'Search' button in iPhone/iPad Safari keyboard
<form action=".">
<input type="search" />
</form>
But this does not work when you are using an AngularJS form with ng-submit like this
<form action="." ng-submit="doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
The action attribute breaks the Angular form submit.
Any suggestions on how to put a dummy action attribute and still get ng-submit to handle the form processing? Or any other solution that would show the iOS keyboard's search key with an AngularJS HTML5 form.
Just encountered the same problem, key here is that angular prevents default form submission only if no action specified, so if you want to specify one you need to preventDefault manually, which should be pretty easy.
This should work (worked for me):
<form action="." ng-submit="$event.preventDefault();doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
Also note, that you will need to blur() your input field after you made a Search request in order to auto-hide keyboard.
Update:
With the latter this directive will help you:
.directive('prettySubmit', function () {
return function (scope, element, attr) {
var textFields = $(element).children('input');
$(element).submit(function(event) {
event.preventDefault();
textFields.blur();
});
};
})
I have placed preventDefault() in directive, so your form will look like this:
<form action="." ng-submit="doSearch(searchtext)" pretty-submit>
<input type="search" ng-model="searchtext" />
</form>
I encountered the same problem.
Finally I decided to use
<form action="{{'#/search/' + searchText }}">
Instead, and it works.
I'm using standard JQM date picker with input tag like this
<input type="date" data-clear-btn="false" id="dp" value="2006-09-14">
on request here is jsfiddle example: http://jsfiddle.net/GardenOfEmuna/47VUw/
Now I want to display value in a trigger button and open datepicker upon clicking on it.
Has anyone idea how to open datepicker with a trigger button?
You are not using a jqm datepicker, since there is none. You are using the native browser datepicker control and you can't trigger it as proved in this thread
Possible solution:
I've created a jsFiddle, it uses the datepicker from jquery ui with a wrapper class as shown in the jqm documentation (link)
html
<div data-role="page" id="foo">
<div data-role="content">
<input id='myDatePicker' type="text" data-role="date">
<button id='myButton' class="ui-btn">Button</button>
</div>
</div>
js
$(document).on('pageinit',function(){
$('#myButton').click(function() {
$('#myDatePicker').datepicker( "show" );
});
});
resources
jquery.mobile-1.4.2.min.css
jquery-1.9.1.min.js
jquery.mobile-1.4.2.min.js
jquery.ui.datepicker.js
I am trying to bind jquery mobile horizantal radio buttons using knock out teplate binding.
The fielsset in template looks like
<fieldset data-role="controlgroup" data-bind="attr: {id:QuestionID+'_fld'},template: {name:'optionTemplate', foreach: OptionList}">
</fieldset>
and the option template looks like
<script type="text/x-jquery-tmpl" id="optionTemplate">
<input type="radio" data-bind="attr: { id:OptionID+'_radio',value:OptionID, name: QuestionID+'_rd'}, checked:$parent.OptionId" />
<label data-bind="text:OptionText, attr: {id:OptionID+'_optn', for : QuestionID+'_rd' }"> </lable>
</script>
I have tried
$('input[type=radio]').checkboxradio().trigger('create');
$('fieldset').controlgroup().trigger('create');
Here my problem is that the mobile css is not applying to the fiedset.
You must do this after the template has built your page or during the page initialization event, something like this:
$(document).on('pagebeforeshow', '#pageID', function(){
});
Page content can be enhanced ONLY when content is safely loaded into the DOM.
Second this do NOT mix refresh functions with trigger create. Either one or the other. Trigger create is used to enhance whole content, and it should NOT be used on single elements. No point in restyling whole page every time you add new content.
Basically you only want to use:
$('input[type=radio]').checkboxradio().checkboxradio('refresh');
or if first line throws an error:
$('input[type=radio]').checkboxradio();
and:
$('fieldset').controlgroup();
But I would advise you to only use this line after everything has been appended:
$('#contentID').trigger('create');
where #contentID is an id of your div data-role="content" object. Or in case you are not using content div, only data-role="page" div then use this:
$('#pageID').trigger('pagecreate');
where #pageID is an id of your page.
To find out more about marku enhancement of dynamically added content take a look at this answer.