I am trying to use AsyncSelect from react-select library.
I have enabled cacheOptions option.
Using below mentioned steps I am seeing an issue with loadOptions
Search for a string test
List of options gets displayed
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires an API with search input tes
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires API with search input te.
I am not sure why loadOptions getting fired in this scenario if I am entering the same search string.
Here is the AsyncSelect
<AsyncSelect
classNamePrefix="select-item"
onChange={ onOptionSelect }
getOptionValue={ item => item.id }
placeholder="Search by Item"
formatOptionLabel={ company => <CompanyWithIcon Item={ Item } /> }
loadOptions={ loadOptions }
styles={ customStyles }
isSearchable
cacheOptions
isClearable
/>
Here is the loadOptions function
const loadOptions = inputValue => searchItem(inputValue);
Can anybody please help?
I think it is happening because you are not using a callback or a promise for loadOptions. The loadOptions should return a promise.
Reference doc -> https://react-select.com/props#async-props says:
loadOptions:
Function that returns a promise, which is the set of options to be used once the promise resolves.
It should be like below:
const loadOptions = (inputValue, callback) => {
setTimeout(() => {
callback(searchItem(inputValue));
}, 1000);
};
Related
LoginPage.js
class Login{
elements =
verifyUserName(verifyUserName){
this.elements.verifyLogin().should('have.text',verifyUserName);
}
}
//export default Login;
export default new Login();
LoginTest.cy.js
import Login from "../PageObjects/LoginPage";
describe('Page Object Model Pattern in Cypress', () => {
beforeEach(() => {
cy.visit('/')
});
it('Should Login to Home Page Test', () => {
cy.fixture('testData').then((data) => {
Login.verifyUserName(data.expectedusername)
})
})
})
HTML of the element-
<span id="nav-link-accountList-nav-line-1" class="nav-line-1 nav-progressive-content">Hello, S*****N</span>
When I'm trying to run these two files in cypress getting assertion error
"assertexpected <span#nav-link-accountList-nav-line-1.nav-line-1.nav-progressive-content> to have text Hello, S****N".
Basically it's fetching the id & class and asserting with the expected text. Can anyone please suggest any solutions? TIAyour text
I understood that you need to grab text of an element and assert that grabbed text is equal to some expected text.
//grabbed element via Id and saved into $ele using .then command
cy.get("#nav-link-accountList-nav-line-1").then(($ele) => {
//grabbed text value of the element in const txtvalue
const txtValue = $ele.text()
//did chai assertion to be equal to expected text
expect(txtValue).to.be.eq("Hello, S*****N")}
How can I not allow a user to type numbers on my CreatableSelect component?
<CreatableSelect
onKeyDown={handleNumberInput}
components={animatedComponents}
isSearchable={true}
isMulti
options={selectTags}
onChange={newTagsSelectedfunction}
/>
I'm trying to do it with onKeyDown but wonder if it could accept a pattern property
I found a solution by accessing the key property of the event
const handleNumberInput = (e) => {
if (Number.isInteger(Number(e.key))) {
e.preventDefault();
}
};
Is it possible to clear the input text (e.g. "qweqweqweqwe" in the example below) of the (Fluent/Fabric) NormalPeoplePicker programmatically?
I have tried accessing the input element (via the onBlur event) and attempted to change it's value and innerHtml but that doesn't work. Also, that doesn't seem to be a good way of doing it.
https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker
NormalPeoplePicker Component keep input value inside state and its not possible to change it directly:
const picker = React.useRef(null)
...
<NormalPeoplePicker
...
onBlur={() => {
if(picker.current) {
picker.current.input.current.value = ""; // Uncaught TypeError: Cannot set property value of #<Autofill> which has only a getter
}
}}
/>
From Official Documentation inside implementation section there is useful method updateValue which allows to change the input value.
const picker = React.useRef(null)
...
<NormalPeoplePicker
...
onBlur={() => {
if(picker.current) {
picker.current.input.current._updateValue("");
}
}}
/>
Codepen working example ln: 104.
Note:
This is a temporary solution, test every use case before production.
let orgSelected: ITag[] = [];
orgSelected.push({key:0 name:''});
const [selectedOrg,setselectedOrg] = useState(orgSelected);
On TagPicker Property just assign the statevalue like this.
selectedItems={selectedOrg}
This way the tagpicker property will always be selected with an empty item.
name="titleEn" data-testid="edit-category-title-en" type="text" placeholder="Enter category title" value="vxfifyem"
Depending on the purpose, there are few ways to do it:
Global scope variable: (BAD PRACTICE)
let myValue;
before(()=> {
cy.get('[data-testid="edit-category-title-en"]').then($el => {
myValue = $el.text();
})
})
it(()=> {
cy.log(myValue) // myValue is now available
})
but, as you can see the callback and the variable call cannot be used in the same scope, otherwise the variable will be null.
In case you need it in a common scope, then you can use the Cypress.Promise utility, so Cypress will not continue until the promise is resolved.
it('', async () => {
const myValue = await new Cypress.Promise((resolve) => {
cy.get('[data-testid="edit-category-title-en"]')
.invoke('text')
.then((txt) => resolve(txt.toString()))
})
})
cy.log(myValue) // myValue is available
Using Cypress Aliases (BEST PRACTICE)
I do recommend to go throw documentation first: Cypress Variables and Aliases
cy.get('[data-testid="edit-category-title-en"]').invoke('text').as('myValue');
then you can call it via: cy.get('#myValue').
i want to clear my all text field when i post data to server and response become true here is my code of function where i post my data to API and its response exactly as i want but i want when response true all text field are clear..
updateProfile(){
axios.post( "http://172.104.217.178/api/update_sponsor_profile/"+this.state.UserId,{
name:this.state.name,
username:this.state.username,
address:this.state.address,
country_id:this.state.getCountryId,
state_id:this.state.getStateId,
city_id:this.state.getCityid,
} )
.then(response => {
alert(JSON.stringify(response));
if(response.data.status===1){
this.setState({name:null,username:null,address:null,getCountryId:null,getStateId:null,getCityid:null})
}
})
.catch(error => alert(error.response.data));
}
here is the code of my text fields
updateValue(text,field){
if(field==='name'){
this.setState({name:text})
}
else if(field==='username'){
this.setState({username:text})
}
else if(field==='address'){
this.setState({address:text})
}
}
While you may clear your state correctly the input field doesn't take its value from your state, it just updates it when you input something so clearing the state doesn't affect it at all. Try setting the Input field like this:
<Input
onChangeText={(text) => this.updateValue(text,'address')}
value={this.state.address}
/>
the value prop is inheritted from the native TextInput, its documentation is here.