How can I set the displayed dimensions in Tomselect , so as to get rid of this lighthouse warning, nothing I have tried seems to fix it
<TomSelect #change="findStats" v-model="site" :options="{ placeholder: 'Search for site...' }" class="relative w-150px h-150px mx-auto mr-auto ml-auto z-40">
Related
I have a number of DataGrids in our app.
Running tests with Playwright - Chromium - , sometimes prevents the rows from being rendered.
As can be seen in the screenshot, the rows exist, but just not being rendered.
More details, this mostly happens when running the tests from gitlab, but I have also seen it in the front end. Just rarely.
Anybody have any idea how to fix it?
All the affected Tables have a cell that renders like this:
renderCell: (params: any) => (
<div key={params.row.id} className="action_list_element">
{params.row.actionFile
.filter(
(af: ActionFile) =>
af?.actionFileType === ActionFileType.Output
)
.map((af: ActionFile, index: Number) => {
if (af?.file) {
return (
<div
className="no_line_hight"
key={params.row.id + index}
>
<b>
<FileIcon
fileName={af?.file.name}
isValid={af?.file.isValid}
fontSize={"small"}
/>{" "}
<a
href={
"/activity/" +
params.row.pmxActivity.id +
encodeURIComponent("/" + af?.file.absolutePath) +
encodeURIComponent(
"?versionId=" + af?.file.versionId
)
}
>
{af?.file.absolutePath}
</a>
</b>{" "}
({af?.file.revision}) -{" "}
{af?.file.isValid ? "valid" : "not valid"}
</div>
);
} else {
return "";
}
})}
</div>
),
Tried upgrading both Playwright and MUI to the lates version. Did not work.
Also tried to reproduce with my browser, but it went on fine.
It seams it appeared because we were running our test with a headless browser.
https://mui.com/x/react-data-grid/virtualization/
The Documentation explained what was happening, and how to fix it.
I'm trying to use a custom Input component on a Typeahead with the multiple option set. I see in the docs it says to "handle the refs" correctly, but I see no examples of how this is done. I'm not sure what to pass into referenceElementRef. Everything I've tried so far just doesn't render the options as I type. I see them in the DOM, but the opacity of the .rbt-menu is set to 0, so they're basically hidden.
Here's my code so far:
const divRef = React.useRef(null);
return (
<Col>
<div ref={divRef}>
<span className="uppercase">
<FormattedMessage id="d.customer" defaultMessage="Customer" tagName="h4" />
</span>
<AsyncTypeahead
multiple
id="customer-filter-input"
inputProps={{
'aria-label': 'Customer search',
style: { fontSize: '14px' },
}}
key={'customer-input'}
minLength={4}
isLoading={props.isLoadingcustomersSuggestions}
delay={300}
onSearch={(term: string) => handleFilterInputs(term, 'customers')}
size={'lg'}
options={dataSource}
labelKey={'defaultMessage'}
placeholder={intl.formatMessage({
id: 'companyName',
defaultMessage: 'Company name',
})}
onChange={(filterItem: any) => handleAutocompleteUpdate(filterItem, 'customer')}
renderInput={({ inputRef, referenceElementRef, ...inputProps }: any) => (
<Input
{...inputProps}
style={{ position: 'relative' }}
ref={(input: any) => {
inputRef(input);
referenceElementRef(divRef); // What do I put here?
}}
/>
)}
/>
</div>
</Col>
);
And this is what renders in the DOM after I type in the Typeahead and get results:
Any ideas or working examples of Typeahead using multiple and renderInput together?
EDIT:
Here's a codesandbox of what I'm seeing. I also see that the problem is also happening when multiple is NOT set. It seems to be an issue with using renderInput. Is it required that I also use renderMenu?
https://codesandbox.io/s/react-bootstrap-typeahead-async-pagination-example-forked-3kz3z
If you upgrade the typeahead version in your sandbox to the latest version (v5.1.1) and pass the input element to referenceElementRef, it works (note that you need to type some characters into the input for the menu to appear):
// v5.0 or later
renderInput={({ inputRef, referenceElementRef, ...inputProps }) => (
<Input
{...inputProps}
ref={(input) => {
inputRef(input);
referenceElementRef(input);
}}
/>
)}
The menu is rendered in relation to the referenceElementRef node by react-popper. In most common cases, the reference node will be the input itself. The reason there's both an inputRef and a referenceElementRef is for more complex cases (like multi-selection) where the menu needs to be rendered in relation to a container element around the input.
If using v4 of the component, the approach is similar, but the ref to use is simply called ref:
// v4
renderInput={({ inputRef, ref, ...inputProps }) => (
<Input
{...inputProps}
ref={(input) => {
inputRef(input);
ref(input);
}}
/>
)}
Using IE I have automated a site but now after everything, I got stuck with a form which throws a dialogue box "Message from Webpage" Ok or Cancel.
Dialogue Box Image
Brower's HTML inscpect :
<div class="formbuttons">
<input name="Deactivate" class="formsubmit deactivate" id="ButtonDeactivate"
style="width: 160px;" onclick="return confirm('Are you sure you want to
deactivate the feature?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(
"ctl00$ContentPlaceBody$ButtonDeactivate","", true, "
", "", false, false))" type="submit" value="Deactivate">
</div>
The methods I have tried :
1. By removing the onclick from html but it didn't help though regular expression is actually removing it
[String] $body = "onclick=.*feature....."
$ie.Document.body.innerHTML -replace "$body", ""
$deactivate=$ie.document.getElementById("ButtonDeactivate")
$deactivate.Click();
2. By adding few statements as mentioned here (Automating IE confirmation prompt with Powershell)
$ie.document.forms | Select -First 1 | % { $_.submit() }
My only motive is to click on the OK popup button.
Thanks for the help in advance.
Try to query the Outer HTML property of the item to get the HTML code. Then all you have to do is replace the "confirm (*)" with "". After that you can set it back into the script and then click it.
$Script = $IE.document.getElementsByTagName("script").item(#----------Whatever Number it is)
$Script.outerHTML = $Script.outerHTML | % {if ($_ -like "return confirm*") {"return true;"} else {$_}}
$autotransbtn.Click()
Reference:
(1) Automating JavaScript confirmation prompt in IE using PowerShell
(2) internet explorer - Automating IE confirmation prompt with Powershell
How do I find element in Protractor to click on a button (login button).... I have entered login name and Password but no luck clicking on my "log in" button. My code does not have model, Repeater , ID or class for the login section to enter the App.
Thanks in advance for the help. Ho do I format the actual code so I can run this using Protratcor?
Following is my code:
<div class="btn-panel">
div>
<div ng-show="loginAsAdmin" hs-gesture="{handler: goToPin}" class="ng-hide">
<i class="icon-back-round"></i>
</div>
!--<div class="brad-all attention" hs-gesture="{handler: clearLogin}">
i class="icon-close-round"></i>
</div>-->
<div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
</div>
</div>
<div ng-show="loginAsAdmin" hs-gesture="{handler: goToPin}" class="ng-hide">
<i class="icon-back-round"></i>
</div>
<div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
Edit for future users (This command was a workaround rather than a direct solution to his original problem of not finding/clicking button):
You could also try submitting the form by hitting enter (you may want to do this while within the password field) - browser.driver.actions().sendKeys(protractor.Key.ENTER).perform();
Another Edit: This also just occurred to me - there is another option to simulate a click event: browser.driver.actions().mouseDown(loginBtn).mouseUp().perform();
Original Post
You say your code does not have an ID or class, but I see your Login links having the class 'btn-ok'? Maybe I'm misunderstanding but you could try using cssContainingText:
var loginBtn = element(by.cssContainingText('.btn-ok', 'Log In');
loginBtn.click();
That will locate the element with a class of 'btn-ok' with the specified string of 'Log In'
Source: https://angular.github.io/protractor/#/api?view=ProtractorBy.prototype.cssContainingText
#kevin Presuming that
' <div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
</div>'
is the tag that holds the your login button and also only clicking is what you need. following might work for you:
element(by.xpath("//div[contains(#class,'btn-ok') and contains(text(),'Log In')]")).click();
You can select it by className using element(by.className('btn-ok')) or element(by.css('.btn-ok')) and then simply throw a .click() on the end and voila:
element(by.css('.btn-ok')).click(); or $('.btn-ok').click()
I am stuck here and would very much appreciate help. I have a form in a razor view with a input field for current city which looks like this:
#Html.LabelFor(x => x.UserModel.CurrentCity)
#Html.TextBoxFor(x => x.UserModel.CurrentCity, new { #data_bind = "value: UserModel.CurrentCity ", #class = "city", #data_val = "true", #data_val_required="City is required" })
#Html.ValidationMessageFor(x => x.UserModel.CurrentCity)
I want autocomplete for this field and am using jquery token input plugin for this like:
$(".city").tokenInput('#Url.Action("AutocompleteCity", "Settings")',{ minChars: 2, tokenLimit: 1, hintText: "Type in a city" });
$(".city").tokenInput("add", {name: viewModel.UserModel.CurrentCity()});
Everything works fine except the clientside unobtrusive validation. The form gets posted even if CurrentCity is empty.
I also tried to change the MVC helpers to plain html:
<input data-val="true" data-val-required="City is required" type="text" class="city" data-bind = "value: UserModel.CurrentCity, attr: { name: 'UserModel.CurrentCity', id: 'UserModel.CurrentCity'}" />
<span class="field-validation-valid" data-valmsg-for="UserModel.CurrentCity" data-valmsg-replace="true"></span>
This approach prevents the form from being submitted but the validation-error class is not injected into the span and the error message does not show up.
Any suggestions?
The original input element you created is hidden. You will likely need to enable validation of hidden elements: jquery.validate v. 1.9 ignores some hidden inputs or https://stackoverflow.com/a/13295938/173225.