we have the problem that a transition from the SAP Fiori Launchpad into our application sets the focus on the SearchField of the Master view.
It's a problem, because on mobile devices it triggers the activation of the keyboard which blocks the list view entries.
Any idea how to prevent that behaviour?
Directly entering the application is not creating this problem.
It's also happening in another Master/Detail application we created.
Across Android and iOS devices, replicated on Safari, Chrome, and Firefox.
Kind regards,
Michael
A bit late to the party but we had the same problem. Using onAfterRendering does work only once because that lifecycle hook gets only called once. To solve the issue do the following:
onInit: function () {
// onAfterShow hook gets called every time the view is shown
this.getView().addEventDelegate({onAfterShow: this._afterShow}, this);
},
_afterShow: function () {
jQuery.sap.delayedCall(0, this, function () {
jQuery('input').blur();
});
}
Hope that helps.
This is a workaround (the easiest solution I could Find as of now)
since I couldn't reproduce your issue :(
onDataLoaded() or in onAfterRedering() methods
//basically set the focus on something like this.. OR just create any SAPUI5 element and setVisible(false) and set the focus()
this.getList().focus();
UPDATE: Catch hold of search in getHeaderFooterOptions()
getHeaderFooterOptions: function () {
var _this = this;
var objHdrFtr = {
//sI18NMasterTitle: "YOUR_TITLE",
onRefresh: function (searchField, fnRefreshCompleted) {
_this._searchField = searchField;
}
};
return objHdrFtr;
}
then
onAfterRendering(){
if(this._searchField){
this._searchField.onAfterRendering = function() {
jQuery(this.getDomRef()).focusout()
};
}
}
Let me know if this works or not!
I will delete the answer.
Related
Is there any openui5 event Handler for orientationchange and window resize ?
onInit: function() {
var data;
this.drawChart(data); // working fine
$( window ).resize(function() {
this.drawChart(data); // not working
});
},
drawChart: function(data) {
//code for draw chart
}
OpenUI5 has built-in functionality for detecting orientation change as well as when there is a responsive size change (desktop->tablet for example).
Take a look at sap.ui.Device.orientation's attachHandler event:
Registers the given event handler to orientation change events of the
document's window.
Here is an example of using sap.ui.Device.orientation.attachHandler:
sap.ui.Device.orientation.attachHandler(function(mParams) {
if (mParams.landscape) {
alert('in landscape mode');
} else {
alert('in portrait mode');
}
});
Also of use is sap.ui.Device.media's attachHandler for detecting when the window is resized to a different range-set.
For directly listening to when the window is resized it looks like you already have a solution for that, just make sure you keep track of the correct scope to use:
var self = this;
$( window ).resize(function() {
self.drawChart(data);
});
I found the solution
this.* will not work inside jquery as this has a different meaning wherever its encapsulated...
in openui5 *.view.js this implies the view object
in *.controller.js this implies the controller object...
in jquery this implies the component in which it is placed or whatever it is referring to in that context...
you cannot simply mix "this" wherever you like
sap.ui.controller("oui5mvc.controllerName").drawChart(data);
I trying to learn SmartFace App Development Platform. I added a SliderDrawer in Page then after I added codes as follows. But this codes not working in OnShow() event. How can I do this? Maybe I can do with write a lot of code. But I want to do without writing a lot of code.
function Page1_Self_OnShow() {
Pages.Page1.SliderDrawer1.show();
}
This is a known issue for Android, it will be fixed.But you can solve the problem until the bug is fixed as follows:
function Page1_Self_OnShow() {
var timeoutID = setTimeout(function () {
setHello();
}, 200);
function setHello() {
Pages.Page1.SliderDrawer1.show();
}
function cancelHello() {
clearTimeout(timeoutID);
}
}
I upgraded the kendo library to the 2014Q1 framework which had a few nice features that they were adding, however when I did that it broke any widget (grid, tabStrip, select lists, etc.) from rendering at all. I tracked it down to the layout/view not being able to activate the widget without being wrapped in a setTimeout set to 0. Am I missing something key here or did I build this thing in an invalid way?
http://jsfiddle.net/upmFf/
The basic idea of the problem I am having is below (remove the comments and it works):
var router = new kendo.Router();
var mainLayout = new kendo.Layout($('#mainLayout').html());
var view = new kendo.View('sample', {
wrap: false,
model: kendo.observable({}),
init: function() {
// setTimeout(function(){
$("#datepicker").kendoDatePicker();
// }, 0);
}
});
mainLayout.render('#container');
router.route('/', function() {
mainLayout.showIn('#app', view);
});
router.start();
Admittedly, I don't fully understand it, but hope this helps.
Basically when you try to init the #datepicker, the view elements have not been inserted into the DOM yet. You can put a breakpoint inside the init function, when it hits, check the DOM and you will see that the #app is an empty div, and #datepicker does not exist yet (at least not on the DOM).
kendo.Layout.showIn seems to need to exit in order for the view to finish rendering, but when it initializes the view's elements, it thinks the render is done and init is triggered incorrectly ahead of time. The setTimeout works because it runs the kendoDatePicker initialization asynch, the view is able to finish rendering before the timeout function.
Workarounds...
Trigger the view rendering from the view object itself:
var view = new kendo.View('sample', {
init: function() {
$("#datepicker").kendoDatePicker();
}
});
router.route('/', function() {
view.render('#app');
});
Select and find the datepicker from the view object itself:
var view = new kendo.View('sample', {
init: function() {
view.element.find("#datepicker").kendoDatePicker();
}
});
router.route('/', function() {
mainLayout.showIn('#app', view);
});
Near the bottom of this thread is where I got the idea for the 2nd option. Maybe someone else can come around and give a better explanation of whats going on.
After upgrading to durandal 2.0, I found I needed to convert my master list page to use the showDialog function instead of showModal.
Previously my master model looked like this:
define(['durandal/amd/require', 'durandal/app', 'durandal/viewLocator', 'durandal/system', 'durandal/plugins/router', 'durandal/lib/tableModel', 'viewmodels/product'], function (require, app, viewLocator, system, router, table, product) {
var tm = {
tableModel: new tableModel(),
createProduct: function (data) {
app.showModal(product, data);
}
}
//...
return tm;
}
Then in my product detail view page I could close the modal easily like so
data-bind="click: $root.modal.close">Close
Now in Durandal 2.0 it is much harder to get right.
The code in the masterpage is now
define(['durandal/app', 'durandal/viewLocator', 'durandal/system', 'plugins/router', 'lib/xhrs', 'lib/tableModel'], function (app, viewLocator, system, router, xhrs, table, product) {
var tm = {
tableModel: new tableModel(),
createProduct: function (data) {
app.showDialog(product, data);
}
}
//...
return tm; }
But the way to access the close function is annoying:
Firstly I have to require the 'plugins/dialog' into the product detail viewmodel; which I would prefer not to do as I don't think the detail viewmodel needs to know that it is a dialog, only the master list viewmodel needs to know that.
then in the compositionComplete event of the product detail view model I assign:
prodedit.close = function () {
dialog.close(prodedit);
}
(prodedit is the returned as the product detail vm)
In this way the product detail dialog can be closed using this:
data-bind="click: $root.close"
OK NOW HERE IS MY ISSUE:
This will work to popup the dialog once or twice, but then fails from then onward without an error. The only thing I can see is that dialogActivator.activateItem hits its fail line: dfd.resolve(false);
Interestingly if I do pause long enough on breakpoints the issue does not occur. But once it occurs once, it never works again to open the dialog.
Is there a better way to do this?
Thankyou.
I'm making a mobile-app using Phonegap and HTML. Now I'm using the google maps/places autocomplete feature. The problem is: if I run it in my browser on my computer everything works fine and I choose a suggestion to use out of the autocomplete list - if I deploy it on my mobile I still get suggestions but I'm not able to tap one. It seems the "suggestion-overlay" is just ignored and I can tap on the page. Is there a possibility to put focus on the list of suggestions or something that way ?
Hope someone can help me. Thanks in advance.
There is indeed a conflict with FastClick and PAC. I found that I needed to add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
There is currently a pull request on github, but this hasn't been merged yet.
However, you can simply use this patched version of fastclick.
The patch adds the excludeNode option which let's you exclude DOM nodes handled by fastclick via regex. This is how I used it to make google autocomplete work with fastclick:
FastClick.attach(document.body, {
excludeNode: '^pac-'
});
This reply may be too late. But might be helpful for others.
I had the same issue and after debugging for hours, I found out this issue was because of adding "FastClick" library. After removing this, it worked as usual.
So for having fastClick and google suggestions, I have added this code in geo autocomplete
jQuery.fn.addGeoComplete = function(e){
var input = this;
$(input).attr("autocomplete" , "off");
var id = input.attr("id");
$(input).on("keypress", function(e){
var input = this;
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.2555, -121.9245),
new google.maps.LatLng(37.2555, -121.9245));
var options = {
bounds: defaultBounds,
mapkey: "xxx"
};
//Fix for fastclick issue
var g_autocomplete = $("body > .pac-container").filter(":visible");
g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
$(".pac-item", this).addClass("needsclick");
});
//End of fix
autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
//Handle place selection
});
});
}
if you are using Framework 7, it has a custom implementation of FastClicks. Instead of the needsclick class, F7 has no-fastclick. The function below is how it is implemented in F7:
function targetNeedsFastClick(el) {
var $el = $(el);
if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
return true;
}
So as suggested in other comments, you will only have to add the .no-fastclick class to .pac-item and in all its children
I was having the same problem,
I realized what the problem was that probably the focusout event of pac-container happens before the tap event of the pac-item (only in phonegap built-in browser).
The only way I could solve this, is to add padding-bottom to the input when it is focused and change the top attribute of the pac-container, so that the pac-container resides within the borders of the input.
Therefore when user clicks on item in list the focusout event is not fired.
It's dirty, but it works
worked perfectly for me :
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Configuration: Cordova / iOS iphone 5