I have a form that includes a street address, city, state, and zip. It autocompletes for text inputs, but if I change the street address to a textarea it no longer autocompletes and the user has to type the entire street address.
// autocomplete works on the first character
<input type="text" name="address" autoComplete="shipping street-address" placeholder="Street address" value={this.state.address} onChange={this.handleAddressChange} />
// does not autocomplete at all
<textarea name="address" autoComplete="shipping street-address" placeholder="Street address" value={this.state.address} onChange={this.handleAddressChange} />
The entire change is input type="text" vs textarea. Is there a way to enable autocomplete for the textarea too, or is there a reason it's not working specific to the React framework?
Related
Here's the code for the ionic component in question:
<IonInput
name="startTreatmentDate"
type="date"
className={!startTreatmentDate ? 'hide-picker' : ''}
id="date-picker"
value={startTreatmentDate}
spellCheck={false}
autocapitalize="off"
onIonChange={(e) => checkDateOfBirth(e.detail.value!)}
required={true}
placeholder="MM/DD/YYYY"
/>
This item renders in the DOM as:
<ion-input name="startTreatmentDate" type="date" id="date-picker" value="" autocapitalize="off" placeholder="MM/DD/YYYY" class="hide-picker sc-ion-input-md-h sc-ion-input-md-s md hydrated"><input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="startTreatmentDate" placeholder="MM/DD/YYYY" required="" spellcheck="false" type="date">
::before
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="startTreatmentDate" placeholder="MM/DD/YYYY" required="" spellcheck="false" type="date">
</ion-input>
Below are the list of commands I'm currently using.
Expected:
Selenium IDE should accept click commands to select date from calendar.
Tried:
I've tried using the Selenium IDE Commands to click the input, and select a date; but the "Select" for the date gets registered as a keystroke rather than a click while recording. The click command also doesn't bring up the calendar for the date picker, so I can't even force the clicks by tracking their x/y and using that.
I've also tried using execute script to fire off JS to inject values, which only partially works, as it sets the inputs value without updating the value in the input itself (as pictured).
I feel like I've tried just about everything short of trying to rewrite the input itself.
I have a simple form with two text inputs like below:
<form>
// this is visible in mobile view
<input id="mobileView" type="email" required ng-model="myValue" />
// this is visible on desktop view
<input id="desktopView" type="email" required ng-model="myValue" />
</form>
my question is does doing so violate angular form validation? because both of the inputs are in DOM and in one view one of them have value and in other view it doesn't have any value. does this break angular's validation?
Your code is correct and use ng-if it handle the DOM elements.
<form>
// this is visible in mobile view
<input id="mobileView" type="email" ng-if="condition for mobile view" required ng-model="myValue" />
// this is visible on desktop view
<input id="desktopView" type="email" ng-if="condition for desktop view" required ng-model="myValue" />
</form>
I am using angularjs and bootstrap. some of my pages integrated with "typeahead" code.
when I write a character in text field, the dropdown displays but with empty labels.
when I click on any empty label, it fills the textfield with correct value.
The problem is, dropdown not displays labels
any solution.
<input type="text" class="order_input" ng-model="selected_address"
typeahead="rest as rest.name for rest in searchTerms($viewValue,'restaurants/typeahead_address/',{type:restaurant_type})"
placeholder="Enter Postal Code or Address.." />
I am not sure about typeahead
But I actually apply what you are talking about as follows
<input type="text" class="order_input" list="dataSource" placeholder="Enter Postal Code or Address.." />
<datalist id="dataSource" >
<option ng-repeat="rest in allData">{{rest.name}}</option>
</datalist>
I have a simple form that accepts an input. For some reason when I change the value the scope variable changes to undefined.
<body ng-controller="myctrler">
<input ng-model="t.unsubscribeEmail" type="email" class="textboxfields" placeholder="Enter email address">
</body>
In the controller:
$scope.k=
{
unsubscribeEmail : "not"
};
The value before I enter anything into the inputbox is "not". As soon as I type something in the input the value changes to undefined.
What am I missing?
Change your input type text or write valide email
<input ng-model="t.unsubscribeEmail" type="text" class="textboxfields" placeholder="Enter email address">
or write valide email in
<input ng-model="t.unsubscribeEmail" type="email" class="textboxfields" placeholder="Enter email address">
It seems that the ngModel does not return anything at all when it's invalid.
I want to play with the value when only 2 or three characters is inserted!
<input
type="tel"
class="fullinput"
ng-model="xxxxx"
ng-minlength="12"
ng-maxlength="15"
required
/>
Just add name attribute to your form and to input. Then you'll be able to access needed value via:
in template {{myForm.xxx.$viewValue}}
in controller $scope.myForm.xxx.$viewValue
<form name="myForm">
<input
type="tel"
class="fullinput"
ng-model="xxxxx"
name="xxx"
ng-minlength="12"
ng-maxlength="15"
required
/>
</form>